javascript - JQuery 删除使用 onclick 事件

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

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

标签： javascriptjquery

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

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