Erstellen von Links zum Löschen von Elementen in JavaScript
Nehmen wir nun an, wir haben viele Absätze:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Lassen Sie uns es so einrichten, dass jedem Absatz am Ende ein Link zum Löschen hinzugefügt wird.
Lassen Sie uns zunächst einfach das Hinzufügen der Links implementieren:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
}
Lassen Sie uns nun bewirken, dass beim Klicken auf den Link der entsprechende Absatz gelöscht wird:
let elems = document.querySelectorAll('#parent p');
for (let elem of elems) {
let remove = document.createElement('a');
remove.href = '';
remove.textContent = 'remove';
elem.appendChild(remove);
remove.addEventListener('click', function(event) {
elem.remove();
event.preventDefault();
});
}
Gegeben ist das Tag ul. Fügen Sie am Ende jedes
li-Tags einen Link hinzu, um dieses li
aus der Liste zu löschen.
Gegeben ist eine HTML-Tabelle. Fügen Sie eine weitere Spalte hinzu, in der für jede Zeile der Tabelle ein Link zum Löschen dieser Zeile steht.