Entfernen von Elementen von ID

Question

Ich habe eine Tabelle mit der folgenden Struktur:

<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> 

Der Inhalt stammt aus einer Datenbank.

Wie Sie sehen können, haben die IDs das Suffix |x. Ich möchte alle Elemente mit dem Suffix |2 in der 2. Spalte und alle Elemente mit dem Suffix |1 in der 3. Spalte entfernen.
Auch die 3. Spalte sollte nach oben verschoben werden, und alle Zeilen, die in der 1. Spalte mit |2 enden, sollten verschwinden.

So dass das Endergebnis sieht wie folgt aus:

<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>

Das ist mein Ansatz ist, aber es funktioniert nicht funktionieren:

$("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 sollte eindeutig sein. Es ist besser, wenn Sie den HTML-Code ändern und IDs eindeutig machen können.

---

IF HTML ÄNDERN IST NICHT MÖGLICH

sowohl als Wähler auf gleiche Element zeigen, verwenden folgende

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

Demo