的 DEMO

Question

我有一个包含4列的表，其中一列有一个按钮。我希望当按钮单击要排除按钮的表格行时。

由于在单击另一个按钮时动态插入表行，因此按钮的ID是动态的，这使我无法使用表格上的按钮的ID作为选择器。

然后我会执行以下操作：在按钮上单击我想要找出该表的哪一行是该按钮，然后删除该行。

有什么建议吗？

在我正在操纵的表格下方。

<table id="tbIngredients">
     <thead>
          <tr>
              <th id="cod"> Code </ th>
              <th id="desc"> Description </ th>
              <th id="price"> Price </ th>
              <th id="op"> Operation </ th>
          </ tr>
     </ thead>
     <tbody>
          <tr>
             <td id="tr1"> 1 </ td>
             <td> Ingredient </ td>
             <td> $ 1.00 </ td>
             <td id="td1"> <input type="button" class="delIngredient" value="Excluir     ingrediente"> </ td>
         </ tr>
         <tr id="tr16">
             <td> 16 </ td>
             <td> Papaya </ td>
             <td> £ 01.05 </ td>
             <td id="td16"> <input type="button" class="delIngredient" value="Excluir ingrediente"> </ td>
         </ tr>
     </ tbody>
</ table>

Answer 1

怎么样，

$('.delIngredient').click(function(){
  $(this).parents('tr').remove();
});

错过了动态，如果您还在页面加载后添加行，则需要将其附加到文档中，

$(document).on('click', '.delIngredient', function(){
  $(this).parents('tr').remove();
});

Answer 2

$('.delIngredient').click(function() {
    $(this).parent().parent().remove();
});

将删除父行。可能不是唯一的方法，但它适用于你的标记。

我认为我更喜欢安德鲁斯解决方案。然后它不依赖于嵌套。

Answer 3

试试这个：

$("#tbIngredients").on("click", ".delIngredient", function() {
    $(this).closest("tr").remove();
});

JQuery表/按钮删除

3 个答案:

的 DEMO