使用 href 中的 jquery 从 ul 中删除 li

Question

我想删除所有 <li> 行，但我删除了标签 <a>。我只是尝试 $(this).closest('li').remove() 但不工作也尝试 li.remove()。我有这个：

$("#demo").append("<li  class='list-group-item'>" + result.Num+ " - " + result.Desc+ "<a onclick='$(this).remove()' href='#'class='pull-right'> Delete</a> </li>");

Answer 1

解决你的问题的正确方法是使用$(this).closest('li').remove()遍历到最近的父li到被点击的a并移除它。请注意，您需要对字符串中的引号进行转义，这是我能理解为什么您尝试的方法不起作用的唯一原因。

$("#demo").append('<li class="list-group-item">' + result.Num + ' - ' + result.Desc + '<a onclick="$(this).closest(\'li\').remove()" href="#" class="pull-right">Delete</a></li>');

然而，更好的方法是使用委托事件处理程序而不是过时的 on* 事件属性，如下所示：

var $demo = $("#demo").append('<li class="list-group-item">' + result.Num + ' - ' + result.Desc + '<a href="#" class="pull-right">Delete</a></li>');
$demo.on('click', '.list-group-item a', function(e) {
    e.preventDefault();
    $(this).closest('li').remove();
});

使用 href 中的 jquery 从 ul 中删除 li

Remove li from ul with jquery from href

html

javascript

css

jquery

listitem