Question

我正在使用Jquery构建购物清单，并且在删除功能方面存在一些问题。基本上我正试图＆＃34;删除＆＃34;他们点击x时的项目。删除功能无法正常工作....你们有什么建议吗？这是代码：

    $(document).ready(function() {
//assigning the click event to the buttom
$('#addButton').click(function(){

    var listItem = $('#listItem');
    $('#shoppingList ul').append('<li>' + listItem.val() + "   X   " + '</li>');
    listItem.val('').focus();

});


$('#shoppingList').on("click", "X", function () {

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

}）;

Answer 1

X不是jQuery中的有效选择器。在您的情况下，它只是一个普通的文本。

因此，一种解决方案是将X包裹在span内，例如：

$('#shoppingList ul').append('<li>' + listItem.val() + "   <span class='close'>X</span>   " + '</li>');

然后您可以使用：

定位此span

$('#shoppingList').on("click", "#shoppingList ul li span.close", function () { 
    $(this).parent().remove();
});

另请注意，您不需要在this内包裹' '，因此您需要使用$(this)代替$('this')。

Answer 2

你应该使用

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

而不是

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

'this'只是一个字符串，this是一个关键字，在事件处理程序中引用事件触发的元素。

Answer 3

这个选择器错了。

$('#shoppingList').on("click", "X", function () { });

它没有使用内部文本，而是使用普通的jQuery选择器。

Jquery的删除功能

3 个答案: