Динамическое удаление списка при нажатии кнопки Javascipt

Question

Я пытаюсь создать список из пользовательского ввода текста, где каждый список содержит кнопку удаления, которая удаляет список при нажатии кнопки удаления с использованием javascript. Однако я не могу заставить работать кнопку удаления. Вот что я пробовал:

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]);
}

Кто-нибудь может мне с этим помочь? Спасибо!

Answer 1

Похоже, вы используете здесь jQuery при добавлении прослушивателя событий. Вы также хотите настроить таргетинг на некоторые элементы в глобальной области, чтобы вам не приходилось настраивать их каждый раз при вызове функции. Вот как я бы это сделал.

//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)
}

Это должно работать.

Изменить: просто перечитайте, что вы хотите нажать кнопку, чтобы удалить. Я немного подправлю код.

JSFiddle Link