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()を使用する必要があります。liのロールに追加する代わりに、追加されたにボタンを追加する必要もあります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選択した要素に 1 つ以上のイベントのイベント ハンドラー関数をアタッチします。

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

更新しました

コードは内部に要素を追加してい<li>たため、新しく追加された要素が欠落していました<li>...追加された要素が内側に<ul class=main>ラップされるように、要素を内側に追加する必要があります<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

1 つの解決策は、remove 関数を直接アタッチすることです。

$(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 に答える