Question

我在<li>元素中有一个链接，并希望在单击链接时删除<li>元素。这是我的代码：

<li id='i80'>
 <div class='singleitem'>
  <img src='/css/images/image.png' width='30' height='30' />
  <div id='listtext'><h1>Title</h1></div>
  <a class='delete' id='80' href='#'></a>
  <div id='helper'></div>
 </div>
</li>

我的Jquery代码：

$(".delete").click(function(e){
 var del_id = $(this).attr('id');
 e.preventDefault();
 $.post("/add/delete.php", { iid: del_id } ,function(data){
  if(data.status == 'deleted');
   {
     $(this).closest("li").remove();
   }
 });
});

ajax工作正常并且'已删除'状态正在被正确发回，但是，涉及删除父li的一行只是不起作用。有任何想法吗？感谢。

修改

我注意到我已动态添加到现有ul的新列表项目在此处不起作用。这是因为这只是在页面最初加载时加载，然后不能与动态更新的内容一起使用吗？

Answer 1

$(".delete").click(function(e){
 var del_btn = $(this);              // cahed
 var del_id = del_btn.attr('id');
 e.preventDefault();
 $.post("/add/delete.php", { iid: del_id } ,function(data){
  if(data.status == 'deleted');
   {
     del_btn.closest("li").remove(); // used
   }
 });
});

<小时/> 的修改以适应OP提出的其他问题。
使用.on()方法，如：

$(".singleitem").on('click', 'a.delete', function(e){
 var del_btn = $(this);              // cahed
 var del_id = del_btn.attr('id');
 e.preventDefault();
 $.post("/add/delete.php", { iid: del_id } ,function(data){
  if(data.status == 'deleted');
   {
     del_btn.closest("li").remove(); // used
   }
 });
});

Answer 2

$（this）ajax块中的对象不是$（“。delete”）对象。你需要做这样的事情：

$(".delete").click(function(e){
 var $del_button = $(this);
 var del_id = $(this).attr('id');
 e.preventDefault();
 $.post("/add/delete.php", { iid: del_id } ,function(data){
  if(data.status == 'deleted');
   {
     $del_button.closest("li").remove();
   }
 });
});

Answer 3

尝试$（this）.parent（）。remove（）;

（虽然感觉就像锯掉了你坐的那个分支......）

Answer 4

尝试以下操作，您需要引用父

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

Jquery - 删除含有链接的li

4 个答案: