You seem to be using some jQuery here when adding the event listener. You also want to target some elements in the global scope so you don’t have to target them everytime the function is called. Here is how I would do it.

//Global scope
const ul = document.getElementById('thisul');
const input = document.getElementById('input');
function show() {
const li = document.createElement('li')
const div = document.createElement('div')
const button = document.createElement('button')
const i = document.createElement('i')
div.textContent = input.value
i.className = 'fas fa-trash'
i.setAttribute('aria-hidden', 'true')
button.appendChild(i)
button.addEventListener('click', function() {
li.remove()
})
li.append(div, button)
ul.appendChild(li)
}

This should work.

Edit:
Just re-read that you want to click the button to delete. I will tweak the code a little bit.

JSFiddle Link

I’m trying to create a list from user text input where each list contains a delete button which deletes the list when the delete button is clicked using javascript. However, I can’t get my delete button to work. Here’s what I’ve tried:

In HTML:

<ul id="thisul"></ul>
<input type="text" placeholder="Add New" id="input">
<input type="submit" class="button" value="Submit" onclick ="show()">

In JS:

function show(){
 var ul = document.getElementById("thisul");
 var input= document.getElementById("input");
 var li = document.createElement("li");
li.classList.add("thisLI");
if(input.value!==""){
 li.innerHTML=input.value+'<button><i class="fas fa-trash" aria-hidden="true"></i></button>';
 ul.appendChild(li);
 ul.on("click", "button", function(){
 del(this);
    });
}
}

function del(x){
var deleting = document.getElementsByClassName("thisLI");
var theList = x.parentElement;
var index = Array.from(deleting).indexOf(x);
theList.removeChild(deleting[index]);
}

Can anyone help me with this?
Thank you!