Question

点击按钮，我想删除其中一个li标记。

这是我的HTML

<div class="inner-intit">
   <sub class="sub">Your Favorite Restaurant</sub><br>
   <li vendor_id="1">
      <h6> vendor 1 at loc 1</h6>
      <p>Near Cyinet ,SoftSol , Hyderabad ,Telangana </p>
      <span class="inDeleteInnerSub"></span>
   </li>
   <input type="button" area="Madhapur" location="Office" name="btn1" class="btn btn-success buttonsearchRestaurant" value="Add Restaurant For  Office">
</div>

我试过这种方式

$(document).on('click', '.inDeleteInnerSub', function(event ) {
    alert('sss');
if (confirm("Are You Sure Want to Delete Current Location?") == true) 
{
           var vendor_id = $(this).closest('li').attr('vendor_id');
    alert(vendor_id);
             $(this).closest('li').remove();
 }
});

但我不知道为什么它没有删除li标签。可能导致这种情况的原因是什么？

这是我的小提琴

http://jsfiddle.net/3ubrtmk4/

Answer 1

这会奏效。我也测试过了。 CSS

 .inDeleteInnerSub{
        background:url(../images/icon-delete.png) center top no-repeat;
        width:20px;
        height:20px;
        opacity:0.5;
    }
    .inDeleteInnerSub:hover{
        opacity:0.8;
        cursor:pointer;
    }

Jquery的

<script>
$(function(){
    $(document).on('click', '.inDeleteInnerSub', function(event ) {
      //  alert('sss');
    if (confirm("Are You Sure Want to Delete Current Location?") == true) 
    {
               var vendor_id = $(this).closest('li').attr('vendor_id');
                //alert(vendor_id);
               $(this).closest('li').remove();
     }
});

});
</script>

Html

<div class="inner-intit">
   <sub class="sub">Your Favorite Restaurant</sub><br>
   <li vendor_id="1">
      <h6> vendor 1 at loc 1</h6>
      <p>Near Cyinet ,SoftSol , Hyderabad ,Telangana </p>
      <div class="inDeleteInnerSub">Delete</div>
   </li>
   <input type="button" area="Madhapur" location="Office" name="btn1" class="btn btn-success buttonsearchRestaurant" value="Add Restaurant For  Office">
</div>

Answer 2

span不接受高度和宽度，因此如果您在跨度中添加一些文本以使其具有一定的高度和宽度，则代码可以正常工作

<span class="inDeleteInnerSub">X</span>

Jquery删除最近的li标签不能单击

2 个答案: