In HTML können Entwickler das „ul“-Tag verwenden, um eine Liste von Elementen zu erstellen. Wir können alle zugehörigen Elemente zu einer einzigen Liste hinzufügen. Wir können auch JavaScript verwenden, um Listenelemente zu verwalten.
Manchmal müssen Entwickler Listenelemente mithilfe von JavaScript hinzufügen oder entfernen. Wir können über bestimmte Attributwerte auf die Listenelemente zugreifen und die Listenelemente mithilfe der Methode „removechild()“ entfernen.
In diesem Tutorial nehmen wir die Eingaben des Benutzers entgegen und löschen Listenelemente basierend auf dem Wert.
Grammatik
Benutzer können hinzugefügte Listenelemente mithilfe von JavaScript gemäß der folgenden Syntax löschen
var item = document.getElementById(ID);
list.removeChild(item);
Nach dem Login kopieren
In der obigen Syntax verwenden wir id, um auf das Listenelement zuzugreifen. Danach entfernen wir das ausgewählte Listenelement mit der Methode „removechild()“ aus der Liste.
Beispiel 1 (Dynamische Elemente aus der Liste entfernen)
Im folgenden Beispiel erstellen wir eine Liste mit der ID „Autos“. Zusätzlich haben wir Eingabefelder erstellt, um die Listenelementwerte vom Benutzer zu erhalten. Darüber hinaus haben wir die Schaltflächen „Auto hinzufügen“ und „Auto entfernen“ erstellt, die die Funktionen „addCar()“ und „removeCar()“ aufrufen, wenn der Benutzer auf die entsprechende Schaltfläche klickt.
In JavaScript greifen wir auf Listen- und Texteingabewerte zu. In der Funktion addCar() erstellen wir zunächst das Listenelement und legen dann die ID des Listenelements fest. Als Nächstes erstellen wir einen Textknoten, hängen ihn an das Listenelement an und verwenden dann die Methode appendchild(), um das Listenelement an die Liste anzuhängen.
<html>
<body>
<h2> Removing the <i> dynamic list items </i> from the list using JavaScript</h2>
<ul id = "cars">
</ul>
<input type = "text" id = "carName" />
<button onclick = "addCar()"> Add car </button>
<button onclick = "removeCar()"> Remove car </button>
<script>
var carList = document.getElementById("cars");
var carName = document.getElementById("carName");
function addCar() {
var li = document.createElement("li");
li.setAttribute('id', carName.value);
let text = document.createTextNode(carName.value);
li.appendChild(text);
carList.appendChild(li);
}
function removeCar() {
var item = document.getElementById(carName.value);
carList.removeChild(item);
}
</script>
</html>
Nach dem Login kopieren
Beispiel 2 (Letztes Element aus der Liste entfernen)
Im folgenden Beispiel verwenden wir JavaScript, um das letzte Listenelement aus der Liste zu entfernen. Dieses Beispiel ist dem ersten Beispiel sehr ähnlich, der Unterschied besteht jedoch darin, dass wir das letzte Listenelement in diesem Beispiel und das dynamische Listenelement im ersten Beispiel entfernen.
In der Funktion „removeCar()“ verwenden wir die Eigenschaft „lastElementChild“, um das letzte untergeordnete Element der Liste abzurufen. Danach entfernen wir das letzte Element, falls vorhanden.
In der Ausgabe kann der Benutzer mehrere Elemente zur Liste hinzufügen und auf die Schaltfläche „Löschen“ klicken, um die Listenelemente zu löschen.
<html>
<body>
<h2> Removing the <i> last list item </i> from the list using JavaScript </h2>
<ul id = "cars">
</ul>
<input type = "text" id = "carName" />
<button onclick = "addCar()"> Add car </button>
<button onclick = "removeCar()"> Remove last car </button>
<script>
var carList = document.getElementById("cars");
var carName = document.getElementById("carName");
function addCar() {
var li = document.createElement("li");
li.setAttribute('id', carName.value);
let text = document.createTextNode(carName.value);
li.appendChild(text);
carList.appendChild(li);
}
// function to remove the last element from the list
function removeCar() {
// select the last element
var lastElement = carList.lastElementChild;
// if the last element is present, then remove it
if (lastElement) {
carList.removeChild(lastElement);
}
}
</script>
</html>
Nach dem Login kopieren
Beispiel 3
Im folgenden Beispiel verwenden wir JavaScript, um alle Listenelemente zu löschen. Hier erstellen wir die Projektliste.
In JavaScript haben wir die Funktion addItem() zum Hinzufügen von Elementen und die Funktion clearAll() zum Entfernen aller Elemente aus der Liste definiert. In der Funktion „clearAll()“ verwenden wir das Attribut „firstchild“, um das erste untergeordnete Element der Liste abzurufen, und verwenden die Methode „removechild()“, um das untergeordnete Element zu entfernen. Wir verwenden eine While-Schleife, um zu iterieren, bis alle untergeordneten Elemente der Liste entfernt sind.
In der Ausgabe kann der Benutzer auf die Schaltfläche „Alle löschen“ klicken, um alle Elemente aus der Liste zu entfernen.
<html>
<body>
<h2> Removing the <i> all last list items </i> from the list using JavaScript</h2>
<ul id = "itmes">
</ul>
<input type = "text" id = "itemValue" />
<button onclick = "addItems()"> Add itmes </button>
<button onclick = "clearAll()"> clear list </button>
<script>
var items = document.getElementById("itmes");
var itemValue = document.getElementById("itemValue");
function addItems() {
var li = document.createElement("li");
li.setAttribute('id', itemValue.value);
let text = document.createTextNode(itemValue.value);
li.appendChild(text);
items.appendChild(li);
}
// function to clear all the list items
function clearAll() {
while (items.firstChild) {
items.removeChild(items.firstChild);
}
}
</script>
</html>
Nach dem Login kopieren
Fazit
Benutzer haben gelernt, dynamische Elemente aus Listen zu entfernen. Der grundlegende Ansatz besteht darin, dass jedes Listenelement über eine eindeutige Kennung verfügen sollte, um auf dynamische Listenelemente zuzugreifen und diese zu löschen. Hier verwenden wir den Wert des Listenelements als ID des Bezeichners selbst.
Im zweiten Beispiel entfernen wir nur das letzte untergeordnete Element aus der Liste; im dritten Beispiel entfernen wir alle Listenelemente zusammen.
Das obige ist der detaillierte Inhalt vonWie lösche ich ein hinzugefügtes Listenelement mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
