Mehrere HTML-Elemente entfernen

Code skill

In diesem Quellcode kannst du sehen, wie man in einer App mehr als ein HTML-Element hinzufügen und entfernen kann. Du musst zwei Funktionen definieren: eine für das Hinzufügen und eine für das Entfernen von Elementen. Du siehst auch, wie man mit der DOM-API einem Element ein id-Attribut geben kann, so dass es beim Anklicken gelöscht wird.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Aufgabenliste-App</title>
  <script>
     function einfügenAufgabe() {
         var neueAufgabe = document.createElement("div");
         neueAufgabe.innerHTML = document.getElementById("Feld").value;
          neueAufgabe.onclick = entfernenAufgabe;
         document.getElementById("Liste").appendChild(neueAufgabe);
      }
       function entfernenAufgabe() {
       document.getElementById("Liste").removeChild(this); 
      }
   </script>
</head>
<body>
      <p>Aufgaben für Sonderausstellung</p>
      <br/>
      <input type="text" id="Feld" value="Aufgabe eintippen"/>
      <br/>
      <input type="button" value="Einfügen" onclick="einfügenAufgabe();" />
      <br/>
      <div id="Liste"></div>
</body>
</html>

Zurück zur Mission
Copyright © 2008 Walker Books Ltd
Illustrations © Duncan Beedie
All rights reserved.