javascript - 通过ID删除元素

Question

我有一个具有以下结构的表:

<table>
  <tr>
    <td>some column|1</td>
    <td id="abc|1">abc</td>
    <td id="abc|1">abc</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td id="def|1">def</td>
    <td id="def|1">def</td>
  </tr>
  <tr>
    <td>ome column|2</td>
    <td id="abc|2">abc</td>
    <td id="abc|2">abc</td>
  </tr>
  <tr>
    <td>another column|2</td>
    <td id="def|2">def</td>
    <td id="def|2">def</td>
  </tr>
</table>

内容来自数据库。

如您所见，ID 的后缀为 |x。我想删除第二列中带有后缀 |2 的所有元素以及第三列中带有后缀 |1 的所有元素。
此外，第三列应移至顶部，并且第一列中以 |2 结尾的所有行都应消失。

最终结果如下:

<table>
  <tr>
    <td>some column|1</td>
    <td id="abc|1">abc</td>
    <td id="abc|2">abc</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td id="def|1">def</td>
    <td id="def|2">def</td>
  </tr>
</table>

这是我的方法，但根本不起作用:

$("table td:nth-child(2)").find("[id$=2]").each(function() {
  $(this).hide();
});

$("table td:nth-child(3)").find("[id$=1]").each(function() {
  $(this).hide();
});

Here is the fiddle .

Answer 1

ID 应该是唯一的。如果您可以更改 HTML 并使 ID 唯一，那就更好了。

<小时/>

如果无法更改 HTML

由于两个选择器都指向同一元素，因此使用以下内容

$("table td:nth-child(2)[id$=2], table td:nth-child(3)[id$=1]").hide();

Demo