Question

我创建了<ul>，通过带有删除按钮的按钮动态添加<li>。

最初，默认的li不能包含删除，所以我在脚本

中添加了它

SCRIPT

$(document).ready(function(){
$("#add").click(function () 
{       
  $('.main').append('<br>');    
  $('.main').append($('.append_list').html());

  $('.main').append("<button class='rmv_btn' style='clear:both'> Remove </button>");

});                 
$(".rmv_btn").click(function () 
{
   $(this).remove("append_list");
  //Also tried this      $(this).closest('li').remove();
});
});

当我点击删除按钮时，特定部分仅删除了.....

HTML

     <ul class="main" style="list-style-type:none;">
<li class="append_list">
  <label>Product 1</label> <input type="text">
  <br>
   <label>Product 2</label> <input type="text">
  <br>
   <label>Product 3</label> <input type="text">
  <br>
   <label>Product 4</label> <input type="text">
  <br>

</li>
</ul>
<button id="add" style="clear:both">ADD NEW PRODUCTS</button>-

我在这里制作了bin。

我该怎么做？

注意

我已经完成了这个过程，但是直到它完成了我想要在这里创建的第一个文本框旁边放置删除按钮...

Answer 1

试试这种方式，

$(document).ready(function(){
$("#add").click(function () 
{       
    $('.main').append($('.main > :first-child').clone());
    $('.main').append("<button class='rmv_btn' style='clear:both'> Remove </button>");

});                 
$('.main').on("click",".rmv_btn",function () 
{   $(this).prev('li').remove();
     $(this).remove();
});
});

Working demo

Updated Demo

Answer 2

您需要在dynmically添加的控件上使用 on() 进行绑定事件。您还需要在添加的li中添加按钮，而不是添加ul的rool。

<强> Live Demo

$(document).ready(function() {
    $("#add").click(function() {
        $('.main').append('<br>');
        $('.main').append($('.append_list :first').clone());
        $('.main li:last').append("<button class='rmv_btn' style='clear:both'> Remove </button>")
        $('.main li:last :input').val('');
    });

    $(document).on("click", ".rmv_btn", function() {
        $(this).closest('li').remove();

    });
});

Answer 3

使用on()。on将一个或多个事件的事件处理函数附加到所选元素。

$(document).on('click',".rmv_btn",function ()
 .....

<强>已更新

代码在<li>中附加了元素，因此新添加的元素缺少<li> ...你需要在<ul class=main>中附加元素，以便添加的元素被包装inisde <li>

$("#add").click(function () {           
 //$('.main').append('<br>');
   $('ul.main').append($(".main").html());
   $('.main li:last').append("<button class='rmv_btn' style='clear:both'> Remove </button>");   
}); 

$(document).on("click", ".rmv_btn", function () 
{
   $(this).closest('li').remove(); // and add the closet() to remove to closest <li>

});

小提琴here ..

Answer 4

一种解决方案可以直接附加删除功能。

$(document).ready(function() {
    $("#add").click(function () {
        $('.main').append("<div><br />" + $('.append_list').html() + '<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
    });
});

Demo

Answer 5

有点晚了，但是我想把这个放进去，而不需要jQuery.on()

JSFiddle

HTML：

<ul class="main" style="list-style-type:none;">
<li class="append_list">
    <label>Product 1</label> <input type="text">   <br>
    <label>Product 2</label> <input type="text">   <br>
    <label>Product 3</label> <input type="text">   <br>
    <label>Product 4</label> <input type="text">   <br>
</li>
</ul>
<button style="clear:both" onclick="add_products()">ADD NEW PRODUCTS</button>-

JS：

function remove_products(element) {
    $(element).prev().remove();
    $(element).remove();
}

function add_products() {
    $('.main').append($('.main > :first-child').clone());
    $('.main').append('<button style="clear:both" onclick="remove_products(this)"> Remove </button>');
}

通过按钮删除动态添加的li

5 个答案:

Updated Demo