使用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(); 
     } 
    }); 
});