Question

我想在使用jquery点击按钮后删除最近的$(document).ready(function () { $('#Expadd').click(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>"); $('#Expadd').css('display', 'none'); $('#Expminus').css('display', 'block'); }); $('#Expminus').live('click', function () { console.log('delete'); $(this).closest(".li").remove(); }); });元素。我试过但无法执行此操作。我正在解释下面的代码。

的index.html：

<ol id="expOl">
     <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="Expminus" style="display:none;">-</button>
           </div>
           <div class="clearfix"></div>
       </div>
    </li>
</ol>

此处我的要求最初是文件字段，+按钮可见。当用户点击此+按钮时，相同的类型字段将在前一个字段和前一个字段{{1 }}按钮将替换为-按钮。当用户单击该-按钮时，与-对应的整个文件字段应该删除哪个不可能发生。我还需要用户将再次单击新创建文件的+按钮，另一个文件将创建，依此类推。在创建第一个文件后，我无法删除并创建更多字段。请帮我解决此问题。

Answer 1

尝试下面一段代码，因为.live从版本1.7开始被删除（你使用的是1.9），使用.on：

%{NOTSPACE:PROGMODULE} - %{WORD:PROGBLOCK} - %{GREEDYDATA:ACTION}

更新： -

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

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

整个代码：

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

});

演示：

http://jsfiddle.net/Rj9bR/50/

Answer 2

由于您的评论显示您使用的是1.9.1 jquery版本，因此您需要使用on()

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

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

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

<强>更新

第二期的决议：

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

<强> EX ：

$('.expOl').on('click', '.btn-danger',function () { // Used class as selector
   $(this).closest("li").remove();
}

<强>标记

<ol class="expOl">
   <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="Expminus" style="display:none;">-</button>
         </div>
         <div class="clearfix"></div>
      </div>
   </li>
</ol>

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

Answer 3

将脚本更改为

<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元素中添加按钮一样，它也是动态的。同时验证您不要删除ol中的所有元素。

使用jquery删除最近的Li元素

3 个答案: