使用jquery删除最近的Li元素

我想在使用jquery单击按钮后删除最近的Li元素。我尝试过，但无法做到这一点。我在下面解释我的代码

index.html：

$document.readyfunction{ $'Expadd'。单击函数{ $.getScriptjs/bootstrap-filestyle.min.js； $'expOl'。追加+-； $'Expadd'.css'display'，'none'； $'Expminus'.css'display'，'block'； }; $'Expminus'.live'click'，函数{ console.log'delete'； $this.closest.li.remove； }; }; + 按钮类型=按钮类别=btn btn danger btn sm id=EXPMONUS样式=显示：无；>-

---

因为您的评论说您正在使用1.9.1 jquery版本，所以需要在上使用

您的DOM不包含您只需要的类li的任何li

$(this).closest("li").remove()

$('#expOl').on('click', '#Expminus',function () {
   $(this).closest("li").remove();
}

更新

第二期的决议：

正如我在下面的说明中提到的，您有重复的DOM元素，并且您正在使用ID选择器，它不会针对您期望的元素，您需要使用类选择器

例：

加价

---

注意：您的目标是ID，因为您有重复的DOM元素。不要使用ID，请使用类作为选择器，因为ID必须是唯一的。

因为您的评论说您使用的是需要在上使用的1.9.1 jquery版本

您的DOM不包含您只需要的类li的任何li

$(this).closest("li").remove()

$('#expOl').on('click', '#Expminus',function () {
   $(this).closest("li").remove();
}

更新

第二期的决议：

正如我在下面的说明中提到的，您有重复的DOM元素，并且您正在使用ID选择器，它不会针对您期望的元素，您需要使用类选择器

例：

加价

---

注意：您的目标是ID，因为您有重复的DOM元素。请不要使用ID，请使用类作为选择器，因为ID必须是唯一的。

请尝试下面的代码段作为。live从1.7版开始被取消权限，您正在使用1.9，请使用。在：

 $('.btn-danger').on('click', function () {
             console.log('delete');
             $(this).closest("li").remove(); //// Here it should be "li" insteda of ".li"
         });

更新：-

您需要类选择器，因为id必须是唯一的。 对于动态生成的按钮，请使用以下代码：

$(document).on('click','.btn-success', function () {

});

全部代码：

 $(document).ready(function () {
         $(document).on('click','.btn-success', function () {

             $.getScript("js/bootstrap-filestyle.min.js");
             $('#expOl').append("<li><div class='totalaligndiv'><div class='col-md-10 padding-zero bannerimagefilenew bmargindiv1'><input type='file' class='filestyle' data-size='lg' name='expcerti' id='expcerti'></div><div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm ' id='Expadd'>+</button><button type='button' class='btn btn-danger btn-sm' id='minus' style='display:none'>-</button></div><div class='clearfix'></div></div></li>");
             $(this).css('display', 'none');
              $(this).siblings("button.btn-danger").css('display', 'block');
         });
         $(document).on('click','.btn-danger', function () {
             console.log('delete');
             $(this).closest("li").remove();
         });
     });

演示：

---

请尝试下面的一段代码，因为.live自1.7版起已被取消种族隔离，并且您正在使用1.9，请使用.on：

 $('.btn-danger').on('click', function () {
             console.log('delete');
             $(this).closest("li").remove(); //// Here it should be "li" insteda of ".li"
         });

更新：-

您需要类选择器，因为id必须是唯一的。 对于动态生成的按钮，请使用以下代码：

$(document).on('click','.btn-success', function () {

});

全部代码：

 $(document).ready(function () {
         $(document).on('click','.btn-success', function () {

             $.getScript("js/bootstrap-filestyle.min.js");
             $('#expOl').append("<li><div class='totalaligndiv'><div class='col-md-10 padding-zero bannerimagefilenew bmargindiv1'><input type='file' class='filestyle' data-size='lg' name='expcerti' id='expcerti'></div><div class='col-md-2 padding-zero bmargindiv1'><button type='button' class='btn btn-success btn-sm ' id='Expadd'>+</button><button type='button' class='btn btn-danger btn-sm' id='minus' style='display:none'>-</button></div><div class='clearfix'></div></div></li>");
             $(this).css('display', 'none');
              $(this).siblings("button.btn-danger").css('display', 'block');
         });
         $(document).on('click','.btn-danger', function () {
             console.log('delete');
             $(this).closest("li").remove();
         });
     });

演示：

将脚本更改为

<script>
$(document).ready(function () {
         $('#exp01').on('click','.addBtnClass',function () { //add class to btn on which you add li
             //add li to exp01 as you already done
             $('#Expadd').css('display', 'none');
             $('#Expminus').css('display', 'block');
         });
         $('#exp01').on('click','.classRemove', function () { //add class to btn used for removing li
             console.log('delete');
             $(this).closest(".li").remove();
         });
     });
</script>

由于在ol元素中也有add按钮，所以它也是动态的。还要验证您没有从ol中删除所有元素。

将脚本更改为

<script>
$(document).ready(function () {
         $('#exp01').on('click','.addBtnClass',function () { //add class to btn on which you add li
             //add li to exp01 as you already done
             $('#Expadd').css('display', 'none');
             $('#Expminus').css('display', 'block');
         });
         $('#exp01').on('click','.classRemove', function () { //add class to btn used for removing li
             console.log('delete');
             $(this).closest(".li").remove();
         });
     });
</script>

---

由于在ol元素中也有add按钮，所以它也是动态的。还要验证您没有从ol中删除所有元素。

使用的jQuery版本是什么？您使用的是哪个jQuery版本？live是不推荐的closest.li还是closestli打字错误？我正在使用http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js link.allow.live已弃用，请使用.on使用的jQuery版本是什么？您使用的是哪个jQuery版本？live是不推荐的closest.li还是closestli打字错误？我正在使用http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js link.allow.live已弃用，请使用。on@Neel-谢谢你能解决我在帖子中解释的第二个问题吗？@Neel-谢谢你能解决我在帖子中解释的第二个问题吗？