Question

问题是，当我点击删除按钮时，它会删除所有内容，而不仅仅是相应的行。

＆＃13;

$("a.boutonsupr").live("click",function(event){
   event.stopPropagation();
   if(confirm("You want to delete the image ?")) {
    this.click;
    
   $(".box li").fadeOut('slow', function(){
 			 $(this).remove();
  });

   }
   else
   {
   
   }       
   event.preventDefault();
   
});

＆＃13;

.box li{
   border-width:1px;
 border-style:dotted;
 border-color:black;
 background-color:blue;
 margin-bottom:20px;
 color:white;
}
ul li a{
  color:black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="box">
  <li> 
  <a class="boutonsupr" href=""><span >remove</span></a></li>
  <li><a class="boutonsupr" href=""><span >remove</span></a></li>
  <li><a class="boutonsupr" href=""><span >remove</span></a></li>
  <li><a class="boutonsupr" href=""><span >remove</span></a></li>
</ul>

＆＃13;

JS FIDDLE：

https://jsfiddle.net/x7g7gpwp/

Answer 1

行。所以你不想重新查询，你需要知道被点击的内容。

你想在函数中使用“this”来引用一个标记。

父属性引用li。所以，这就是你想要淡出和删除的内容。

$("a.boutonsupr").live("click",function(event){
   event.stopPropagation();
   if(confirm("You want to delete the image ?")) {
    this.click;

    var li = $(this).parent();
    li.fadeOut('slow', function(){
             li.remove();
  });

   }
   else
   {

   }       
   event.preventDefault();

});

Answer 2

它删除了所有内容，因为您使用的选择器.box li将定位所有匹配的元素。相反，您需要一个更具体针对所单击元素的选择器。像这样的东西应该这样做..

$("a.boutonsupr").on("click",function(event){
  event.stopPropagation();
  if(confirm("You want to delete the image ?")) {
    $(this).parent().fadeOut('slow', function(){
      $(this).remove();
    });
  }
  event.preventDefault();
});

此外，请勿使用live，多年前已弃用..您应该使用on。我还删除了空的else语句和this.click，因为这没有意义，假设您打算调用click()，但这只会导致无限循环，因为它只是一个引用不存在的属性。

Answer 3

您的jquery选择器选择要删除的所有元素。试试这个

$(this).parents('li').fadeOut

jsfiidle示例

https://jsfiddle.net/Not2Day2Die/L41gcxkb/

希望这个答案有助于你:)。

Jquery onclick删除相应的行

3 个答案: