Elemente hinzufügen und entfernen | JavaScript Tutorial Deutsch

Mit dem Coupon-Code: KURZUNDKNAPP
sparst du 10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr.

HTML-Elemente kann man mit JavaScript Code hinzufügen und entfernen. In diesem Video wird das am Beispiel einer Todo-Liste erklärt.

00:00 Grundlagen
00:29 HTML
01:20 JavaScript
02:23 EventListener
03:13 createElement()
03:50 appendChild()
04:25 Elemente entfernen
05:40 Todo-Liste optimieren

Damit dieser Button auf der Webseite angezeigt wird, muss er einem bereits auf der Seite existierenden HTML-Element hinzugefügt werden. Dies macht man über die appendChild(myButton) Methode.

Außerdem wurde in diesem Video mit EventListenern gearbeitet. Ein EventListener kann auf ein definiertes Ereignis (z.B. "click" ) mit dem Aufrufen einer definierten Funktion reagieren. In diesem Video hatte der "Hinzufügen"-Button einen EventListener. Sobald auf den Button geklickt wurde, wurde das im Textfeld definierte Todo der todo_ul hinzugefügt.

[tdm_darkwildfire]

Kannst du erklären, wie man diesen Prozess mit einer Tabelle macht? Ich versuche das gerade umzubauen, es klappt aber nicht so ganz und ich wundere mich, wo der Fehler liegt.

[peterkecks]

Bei mir löscht sich nur das letzte Todo, egal auf welchen Button ich klicke. Und auch nur einmal, danach tut sich nichts mehr bei einem Klick auf einen Button. Ich finde den Fehler nicht, hast Du vielleicht eine Idee woran das liegen könnte? Danke

let inputFeld =
let todoListe =
let addBtn =

addBtn.addEventListener("click", () =>{
input = inputFeld.value;
todoItem = document.createElement("li");
todoItem.innerText = input;


let lBtn =
lBtn.innerText = "x";
todoItem.appendChild(lBtn)

lBtn.addEventListener("click", () =>{
todoItem.remove();
})
inputFeld.value = "";


})

[maarkoneee-]

wie kann man den „x“ button in css desginen?

[f.b.]

1:09 funktioniert "defer" im HTML genauso wie "document.addEventListener(DOMContentLoaded, ..." am Anfang einer JS Datei oder macht es einen Unterschied welche der beiden Möglichkeiten man wählt?

[jacquelinesteinwei]

Geht das auch mit einem Fieldset also mehreren Inputs aber nur mit einem Button?

[chiroaksun]

Hi, macht es einen unterschied, ob ich dem Hinzufügen-button eine "onclick" function gebe oder es direkt mit eventlistener mache?
Und man kann ja auch mit "innerHTML += todo " eingeben. Inwiefern macht das Sinn? Danke im Voraus und geiles Video wieder mal :D

[basti_ehz]

Bei mir wird nichts gespeichert sondern ist nach reload alles wieder weg