Tags mit JavaScript dynamisch löschen

Wie ich in letzter Zeit oft gesehen habe, verwenden im Web viele Leute, die einen Tag mit JavaScript löschen wollen CSS dazu. Sie setzen einfach den Style für „display“ auf „none“. Wenn man den Tag damit nur ausblenden, also unsichtbar machen will, reicht das vollkommen - aber was, wenn man einen Tag einmal wirklich löschen will?

Witzigerweise kann man mit JS einem Tag nicht direkt sagen, dass er entfernt werden soll. Man muss zuerst seinen Eltern-Tag - also den HTML Tag, indem er sich befindet - herausfinden und diesem dann mitteilen, er möge den Kind-Tag löschen, über den man ihn ausfindig gemacht hat.

Dafür benötigen wir zwei JavaScript-DOM-Funktionen: „parentNode“ um den Eltern-Tag zu finden und „removeChild“ um seinen Kind-Tag zu finden. Mit this, können wir sofort auf den Tag Bezug nehmen, indem wir das Ereignis auslösen, zum Beispiel onClick in einem Span-Feld:

<span onClick="this.parentNode.removeChild(this)">Irgendein Inhalt</span>

Wenn jetzt jemand auf dieses Span-Feld klickt, wird es gelöscht. Das this muss immer eine Referenz auf ein HTML-Objekt enthalten, also kann man auch mittels „getElementById“ arbeiten:

<a onClick="document.getElementById('entf').parentNode.removeChild(document.getElementById('entf'))">Feld löschen</a>
<span id="entf">Irgendein Inhalt</span>

Ganz praktisch: das Ganze in eine Funktion gepackt:

function removeTag(tag)
{
tag.parentNode.removeChild(tag);
}

Könnte so aussehen:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Tutorial: Tag löschen</title>
<script type="text/javascript">
// <![CDATA[
function removeTag(tag)
{
tag.parentNode.removeChild(tag);
}
// ]]>
</script>
</head>
<body>
<a onClick="removeTag(document.getElementById('entf'))">Löschen.</a><br />
<span id="entf" onClick="removeTag(this)">Irgendein Inhalt (Ich kann mich auch selbst löschen).</span>
</body>
</html>

Kommentare