克隆jquery后如何追加和删除元素？

Question

I want to make like the following picture. Displays the delete button on the previous element and places the add button for the next element. Example

I already made it, but I don't know how to add and delete at the same time.

 var btn_delete = '<button type="button" onclick="removeKolom($(this))">Delete</button>'; function removeKolom(e){ e.parents('.kolom').remove(); } function addElement(e) { $(".kolom:last").clone().appendTo(".data-repeater"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>Act</th> </tr> </thead> <tbody class="data-repeater"> <tr class="kolom"> <td>One</td> <td>Two</td> <td>Three</td> <td class="btn-repeater"> <button class="add-btn-repeat" onclick="addElement($(this))" type="button">Add</button> </td> </tr> </tbody> </table>

Answer 1

 var btn_delete = '<button type="button" onclick="removeKolom($(this))">Delete</button>'; var btn_add = '<button class="add-btn-repeat" onclick="addElement($(this))" type="button">Add</button>'; function removeKolom(e) { e.parents('.kolom').remove(); } function addElement(e) { var newElement = $(".kolom").first().clone(); $(".kolom").find('button.add-btn-repeat').replaceWith(btn_delete); newElement.appendTo(".data-repeater").find('button').replaceWith(btn_add); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>Act</th> </tr> </thead> <tbody class="data-repeater"> <tr class="kolom"> <td>One</td> <td>Two</td> <td>Three</td> <td class="btn-repeater"> <button class="add-btn-repeat" onclick="addElement($(this))" type="button">Add</button> </td> </tr> </tbody> </table>

Answer 2

You can modify your addElement function as following:

function addElement(e) {
   var $kolomLast = $(".kolom:last");
   $kolomLast.clone().appendTo(".data-repeater");
   $kolomLast.find(".add-btn-repeat").replaceWith(btn_delete);
}

You can keep a reference to the last row element and once it is cloned, you can change its button from Add to Delete .