JS: entfernen lastChild funktioniert nur jedes zweite Schaltfläche klicken

Ich benutze diesen code zum löschen des letzten Elements einer <ul> Liste, aber nur auf der zweiten, vierten, sechsten, ... jeden zweiten Klick auf den button das Element wird entfernt, aber bei jedem Klick erscheint die Meldung. Was kann ich tun, damit das element gelöscht wird auf jeden Klick.

JS:

document.getElementsByTagName('input')[0].onclick = function () {
    'use strict';
    var list = document.getElementById('list'), item = list.lastChild;
    list.removeChild(item);
    window.alert("Removed");
};

HTML:

<ul id="list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li id="child">List item 4</li>
    <li>List item 5</li>
</ul>
<input type="button" value="Delete last">

InformationsquelleAutor danielr1996 | 2015-05-15

12

Dies ist, weil .lastChild liefert alle Knoten, einschließlich der leeren text-Knoten, die existieren in Ihrem <ul>. Verwenden .lastElementChild stattdessen richten Sie Ihre <li> Knoten

Den Unterschied zwischen dieser Eigenschaft und lastElementChild, ist, dass
lastChild gibt den letzten Kindknoten als ein element-Knoten, text-Knoten
oder einen Kommentar-Knoten (je nachdem, welches der Letzte), während
lastElementChild gibt den letzten Kind-Knoten element-Knoten
(ignoriert text und Kommentar-Knoten).

Sehen HTML-DOM lastChild-Eigenschaft und HTML-DOM lastElementChild Eigenschaft weitere Informationen

JS:
```
document.getElementsByTagName('input')[0].onclick = function () {
    var list = document.getElementById('list'), item = list.lastElementChild;
    list.removeChild(item);
};
```
HTML:
```
<ul id="list">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li id="child">List item 4</li>
    <li>List item 5</li>
</ul>
<input type="button" value="Delete last">
```
Einige weitere details, warum das passiert... Beim formatieren von markup mit klarem Abstand, was ich denke, als "phantom" text-Knoten geräuschlos existieren in Ihrem <ul>. Wenn Sie verkleinern das markup, das die folgenden, Ihre erste Beispiel würde zwar funktionieren,
```
<ul id="list"><li>List item 1</li><li>List item 2</li><li>List item 3</li><li id="child">List item 4</li><li>List item 5</li></ul>
```
Plunker Link - minifed markup-Beispiel mit .lastChild
- Ok, es funktioniert jetzt, ich dachte der text-Knoten ein Kind-Knoten der element-Knoten, so entfernen Sie die element-Knoten auch entfernt die text-Knoten.
- das tut es, aber Sie waren das entfernen der text node nicht die element node mit lastElementChild tut, entfernen Sie die element node denen auch entfernt die text node
- es ist komisch, es gibt das, was ich als "phantom" text-Knoten in Ihrem <ul>. Check out diese Plunker zu sehen, die leere text-Knoten angemeldet auf der Konsole
- Ich Hinzugefügt einige zusätzliche Details zu der Antwort, die hilfreich sein können
InformationsquelleAutor scniro

Ändern:

item = list.lastChild;

item = list.lastElementChild;

InformationsquelleAutor stile17

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.