jquery - 使用 jquery 删除最近的 Li 元素

Question

我想在使用 jquery 单击按钮后删除最近的 Li 元素。我尝试过但无法执行此操作。我在下面解释我的代码。

index.html:

$(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();
     });
});

<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>

这里我的要求最初是文件字段和 + 按钮将可见。当用户单击此 + 按钮时，将在前一个字段下方创建相同类型的字段，并且之前的字段 + 按钮将替换为 - 按钮。当用户单击该 - 按钮时，与该 对应的整个文件字段>- 应该删除，但不会发生。当用户再次单击新创建的文件的 + 按钮时，我还需要另一个文件将创建，依此类推。这里我无法删除和创建创建第一个字段后出现更多字段。请帮助我解决此问题。

Answer 1

尝试下面的代码，因为 .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();
         });
     });

演示:

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