如何使用 JQuery 删除 table 单元格的某些元素

Question

有这样一部分标记：

<tr>
  <td class='a'>data1</td>
  <td class='a'>data2</td>
  <td class='a'>data3</td>
</tr>

有些输入动态附加到 3 个单元格中 a class 如下所示：

$("selector").has("selector").find(".a").append("<input 
type='text'/>");

因此输入一个接一个地绘制，从输入构建三列。

例如我们有三行输入

任务是如何删除任何行（不是 table 行）？
有什么想法吗？

Answer 1

您可以执行此操作的一种方法是添加另一列，其中的按钮与输入 "rows" 对齐。当您单击一个按钮时，获取它在该列中的索引，然后在该行的每一列中找到也在该索引处的输入，然后删除找到的输入和单击的按钮。

像这样：

for (var i = 0; i < 5; i++) {
 $("table").has("tr").find(".a").append('<input type="text"/>'); 
 $("table").has("tr").find(".b").append('<button>X</button>'); 
}

$(document).on('click', '.b button', function(){
   var $clickedButton = $(this);
   var $buttons = $clickedButton.parent().find('button');
   var $tableRow = $clickedButton.closest('tr');   
   var curIndex = $buttons.index($clickedButton);  
   $tableRow.find('td').find('input:eq('+curIndex+')').remove();
   $clickedButton.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td class='a'></td>
    <td class='a'></td>
    <td class='a'></td>
    <td class='b'></td>
  </tr>
</table>

如何使用 JQuery 删除 table 单元格的某些元素

how to remove some elements of table cells using JQuery

jquery

cells

removechild