1

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

最初默认的 li 不能包含删除，所以我在脚本中添加了它

脚本

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

在这里，我做了一个垃圾桶。

我怎么能做这个？？

笔记

我已经完成了这个过程，但直到它完成，因为我想将删除按钮放在此处创建的第一个文本框旁边......

4

5 回答 5

2

试试这个方法

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

工作演示

更新的演示

于 2013-01-02T10:05:51.037 回答
1

您需要使用on()在动态添加的控件上绑定事件。您还需要将按钮附加到 addedli中，而不是添加到ul.

现场演示

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

    });
});​
于 2013-01-02T09:43:52.407 回答
1

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

});​

在这里摆弄..

于 2013-01-02T09:44:31.580 回答
1

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

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

演示

于 2013-01-02T10:47:16.977 回答
0

有点晚了，但我想把这个扔进去，不需要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>');
}
于 2013-01-02T13:23:50.710 回答