JQuery 使用 onclick 事件删除 <li>

我有一个 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();

}

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


慕婉清6462132
浏览 216回答 1
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);另一种选择是事件委托,它有助于处理动态创建的元素上的事件。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript