使用jQuery从两个单独的HTML表中删除行

Question

我在页面上有一个表格，我可以点击一行上的添加按钮，它会将行克隆到两个单独的表格。这两个单独的表在每一行都有一个删除按钮。我试图实现的是，当用户单击任一表上的行上的删除按钮时，它将从两个表中删除同一行。

这是我的克隆脚本。正如你所看到的，一行可以从#platetable克隆到两个不同的表格 - ＃platetable2和＃platetable3。

$('#platetable .addPlateItem').live('click', function (e) { 
    var row = $(this).closest('tr').clone(); 
    var row2 = $(this).closest('tr').clone(); 
    row.find("input.addPlateItem") 
     .attr("value", "Delete") 
     .attr("class", "deletePlateItem"); 
    row.find("td.mfrtd") 
     .remove("td.mfrtd"); 
    row2.find("input.addPlateItem") 
     .attr("value", "Delete") 
    .attr("class", "deletePlateItem"); 
    row2.find("td.mfrtd") 
     .remove("td.mfrtd"); 
    row2.append('<td><input type="text" id="portionpercase" name="portionpercase" value=""></td>'); 
    row2.append('<td><input type="text" id="portionperserving" name="portionperserving" value=""></td>'); 
    row2.append('<td><select id="portionsize" name="portionsize"><option value=""></option><option value="cup">Cup</option><option value="each">Each</option><option value="gallon">Gallon</option><option value="ounce">Ounce</option><option value="pound">Pound</option><option value="quart">Quart</option><option value="tablespoon">Tablespoon</option><option value="teaspoon">Teaspoon</option></select></td>'); 
    row2.append('<td>$0.00</td>'); 
    row2.append('<td><input type="text" id="portionperserving" name="portionperserving" value=""></td>'); 
    row2.append('<td>%0.00</td>'); 
    row2.append('<td><input type="checkbox" id="activeplate" value=""></td>'); 
    $('#platetable2 tbody').append(row); 
    $('#platetable3 tbody').append(row2); 
}); 

任何帮助将不胜感激！谢谢！

Answer 1

简单地将相同的类分配给您要删除的两行（ID很好，但它们不能被复制，因此无法复制，当您触发单击事件时，假设您的删除按钮是。delete-button你将不得不存储类行的某处被删除 - 我选择将其存储在删除按钮的数据 - 属性：

$(document).on("click", ".delete-button", function() 
{ 
    var rowDelete = $(this).data("row-delete"); 
    $("#platetable2, #platetable3").find("."+rowDelete).remove(); 
}); 

样本HTML标记，可就是这样

<td class="(rowClass)"> 
    (content) 
    <button class="delete-button" data-row-delete="(rowClass)" type="button"> 
     Delete 
    </button> 
</td> 

我做了一个证明-concept小提琴：http://jsfiddle.net/teddyrised/hkUdE/

$(document).ready(function() 
{ 
    // Start counting at 0 
    var rowAdd = 0; 

    $("#platetable1 .add-button").click(function() 
    { 
     // Create jQuery object 
     var $rowClone = $(this).parents("tr").clone(); 

     // Remove the add button, and add the delete button. 
     // Finally, append to plate table 2 and 3 
     $rowClone 
      .addClass("row-add-"+rowAdd) 
      .find(".button-col") 
      .remove() 
      .end() 
      .append("<td><button type='button' class='delete-button' data-row-delete='row-add-"+rowAdd+"'>Delete</button></td>") 
      .appendTo(".placetable-append"); 

     // Whenever a new row is added, increase rowAdd by 1 so that all newly added rows will have a unique class 
     rowAdd++; 
    }); 

    // Use .on() so that clicks on dynamically added delete button will be captured 
    $(document).on("click", ".delete-button", function() 
    { 
     // Fetch the unique rows to delete 
     var rowID = $(this).data("row-delete"); 
     confirmDelete = confirm("Will delete: " + rowID); 
     if(confirmDelete) 
     { 
      $("table ."+rowID).remove(); 
     } 
    }); 
});