避免克隆重复

Question

I'm cloning table rows from one table to another using this:

$("button[name='addItem']").click(function(){
    var clone = $(this).closest('tr').clone(true);
    clone.appendTo('#items tbody');
  })

I'd like to avoid cloning the same item more than once, so I tried something like this:

if(!$.contains("#items tbody",clone)){
  clone.appendTo('#items tbody');
}

but it keeps throwing false .

Has someone faced this problem?

Answer 1

Assign data-* to a cloned row and check for that data later

$("button[name='addItem']").click(function(){

  var tr= $(this).closest('tr'); // the TR to clone

  if( tr.data("isCloned") === true) return; // Already cloned!! Stop here

  tr.data("isCloned", true);     // Remember I'm cloned yey!

  var clone = tr.clone(true);    // clone it
  clone.appendTo('#items tbody');
});

---

Another way using .addClass() :

$("button[name='addItem']").click(function(){

  var tr = $(this).closest('tr:not(".isCloned")'); // the TR to clone?

  tr.addClass("isCloned");       // Remember I'm cloned yey!

  var clone = tr.clone(true);    // clone it
  clone.appendTo('#items tbody');
});

the last example might not be obvious but if the selector returns nothing (thanks to the :not() selector) than nothing will be cloned and appended.

Answer 2

If you disable the button you cannot add the row again.

 $("button[name='addItem']").click(function(){ this.disabled = true; var clone = $(this).closest('tr').clone(true); //clone.find("button").remove(); clone.appendTo('#items tbody'); })

 table { width:40%; height:140px; display:inline-block; border:1px solid black;}

 <table id="source"> <tbody> <tr><td><button type='button' name='addItem'>+<td>1<td>one <tr><td><button type='button' name='addItem'>+<td>2<td>two <tr><td><button type='button' name='addItem'>+<td>3<td>three <tr><td><button type='button' name='addItem'>+<td>4<td>four <tr><td><button type='button' name='addItem'>+<td>5<td>five </table> <table id="items"><tbody> <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>