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) {

    $(ele).parent().remove();

}

或者，您可以使用现有函数，但在创建元素后使用 jQuery 绑定事件处理程序。

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

removeElement.click(removeElement);

另一种选择是事件委托，它有助于处理动态创建的元素上的事件。