[JavaScript] Dynamisch hinzugefügte Elemente wieder löschen

[Roin]

Hallo Leute,

folgendes Problem.

Ich füge mit JavaScript Zeilen zu dem tbody einer Tabelle hinzu:
[src=javascript] var len = 5;
var tableBody = document.getElementById("TabellenId").getElementsByTagName("tbody")[0];
for(var i = 0; i < len; i++) {
var row = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");

td1.innerHTML = "1";
td2.innerHTML = "2";
td3.innerHTML = "3";

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);

tableBody.appendChild(row);
}[/src]
Das klappt auch wunderbar.

Allerdings klappt das löschen der hinzugefügten Zeilen nicht.
Ich möchte den tbody wieder vollständig leeren. Leider haben knapp 2 Stunden Snippets verwenden, die man bei Google findet nie die Elemente gelöscht, die ich hinzugefügt habe oder nur jedes zweite oder Ähnliches. Ich bin gerade etwas verwirrt und verzweifelt.

Ein paar Beispiel-Snippets, die anscheinend nicht funktionieren:
[src=javascript]tbl=document.getElementById('idDerTabelle');

while(tbl.rows.length>0)
{
tbl.deleteRow(0);
}[/src]
[src=javascript]var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)[/src]
[src=javascript]var parent = document.getElementById("TabellenId").getElementsByTagName("tbody")[0];
var elementsToDelete = parent.getElementsByTagName("tr");
for(var i = 0; i < elementsToDelete.length; i++) {
elementsToDelete.parentNode.removeChild(elementsToDelete);
}[/src]

Zugehöriges HTML:
[src=html4strict] <table id="TabellenId">
<thead>
<tr>
<td colspan="3">Überschrift</td>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>[/src]

Ich weiß echt nicht mehr weiter...
Was mache ich falsch?

--- [2017-05-11 01:40 CEST] Automatisch zusammengeführter Beitrag ---

Gerade postet man es hier fällt einem der Fehler auf...
Das Array, welches ich befülle, bevor die Tabelle erzeugt/gefüllt wird, habe ich schlichtweg nicht geleert...
Dieser Code funktioniert schon mal:
[src=javascript]var tableBody = document.getElementById("TabellenId").getElementsByTagName("tbody")[0];
while(tableBody.rows.length > 0)
{
tableBody.deleteRow(0);
}[/src]

 

[theSplit]

Versuchs mal mit:
[src=javascript]document.getElementById('idDerTabelle').innerHTML = "";[/src]

Das löscht allerdings auch die Zeilenköpfe, ansonsten würde ich den Tbody Tag vorher anlegen, diesen über eine fixe ID befüllen und leeren...
Außerdem könntest du als Id, um einzelnen Zeilen anzusprechen auch "table_row_NUMMER" dynamisch erzeugen lassen und der Zeile vergeben.

Die Anzahl könntest du über document.getElementById('tBodyID').children.length bekommen, das sind dann aber nur die TR Knoten, nicht deren Kindelemente.

 

[Timon3]

Du kannst übrigens einfacher auf die Elemente zugreifen mittels document.querySelector - über die Funktion kannst du mittels CSS-Selektoren Elemente selektieren, genau wie bei jQuery

 

[Roin]

@Timon3: Das wusste ich noch gar nicht. Das klingt doch mal interessant.