JQuery 使用 onclick 事件删除 <li>

Question

我有一个 ul，我将在其中使用 JQuery 添加元素，我有这个

function addElement(e) {

    let text = $('#itemToAdd').val();

    let newItem = $('<li>' + text + '</li>');

    let removeBtn = $('<button onclick = "removeElement">X</button>');

    newItem.append(removeBtn);

    $('#shoppingList').append(newItem);

    $('#itemToAdd').val('');

    e.preventDefault();

}

$(document).ready(function() {

    $("#addBtn").on('click', addElement);

});

为了删除元素，我有这个：

function removeElement() {

    $(this).parent().remove();

}

添加功能很棒，但删除功能却不行。

Answer 1

如果您正在使用，onclick那么您必须使用引用调用该函数，因为this不会引用单击的元素（window最常见的是指对象）并基于该元素删除该元素。元素创建：let removeBtn = $('<button onclick = "removeElement(this)">X</button>');功能 ：function removeElement(ele) {&nbsp; &nbsp; $(ele).parent().remove();}或者，您可以使用现有函数，但在创建元素后使用 jQuery 绑定事件处理程序。let removeBtn = $('<button>X</button>');removeElement.click(removeElement);另一种选择是事件委托，它有助于处理动态创建的元素上的事件。