Jquery行削除ボタンを追加しますか？

Question

次のコードディレクトリに挿入ボタンを追加したい

ボタンを挿入セクションに追加する方法を教えてください。

$(document).ready(function() { 
 
    $('#row_add_btn').click(AddRows) 
 
    
 
    var number = 1; 
 
    function AddRows() { 
 
    number++; 
 
    if (number < 21) { 
 
     var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>' 
 

 
     $('#list_add_rows').append(AddToRows) 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="list_add_rows"> 
 
    <p> 
 
    <input type="text" name="icerik1" /> 
 
    <input type="text" name="icerik1" /> 
 
    </p> 
 
</div> 
 
<a id="row_add_btn">Add</a>

Answer 1

を上記の行を使用する必要がありますが、コードは上記の通りですが、さらにあなたは行の最大数は異なっています。

ifの数を増やして、行を削除するときの条件と減分を増やします。

例スニペット：私は理解していない

$(document).ready(function() { 
 
    $('#row_add_btn').click(AddRows); 
 
    $(document).on('click', '.ibtnDel', removeRow); 
 
    var number = 1; 
 

 
    function AddRows() { 
 
    if (number <= 21) { 
 
     number++; 
 
     var AddToRows = '<p><input name="icerik' + number + '"/> <input name="icerik' + number + '" /><input type="button" class="ibtnDel"></p>' 
 

 
     $('#list_add_rows').append(AddToRows) 
 
    } 
 
    } 
 

 
    function removeRow() { 
 
    number--; 
 
    $(this).parent().remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="list_add_rows"> 
 
    <p> 
 
    <input type="text" name="icerik1" /> 
 
    <input type="text" name="icerik1" /> 
 
    </p> 
 
</div> 
 
<a id="row_add_btn">Add</a>

Answer 2

ボタンが行を削除する]をクリックしたい場合は、このjQueryのは、トリックを行う必要があります：あなたがの削除を挿入することを計画している場合

$(document).on("click", ".ibtnDel", function() { 
    $(this).parent().remove(); 
}); 

jQuery on() documentation