Ich erstelle eine To-Do-Liste. Fast alles funktioniert; Neue Aufgaben werden nach oben verschoben. Wenn Sie auf die Schaltfläche "X" klicken, ist die Aufgabe weg. Mein Problem ist, dass ich mit dem Löschen "X" auf der rechten Seite keine neue Aufgabe erstellen konnte.

Meine vollständigen Codes finden Sie hier: https://codepen.io/paddlepop18/pen/Orevvp?editors=0010

Ich habe versucht, die Löschfunktion im globalen Bereich zu platzieren, aber es hat nicht funktioniert, und ich dachte, es würde helfen, sie unter "createListItem-Funktion" zu platzieren, da sie das übergeordnete Element der Löschfunktion ist.

Ich habe mit einer "console.log-Funktion" getestet und es funktioniert perfekt.

Dies sind nur die Funktionscodes Löschen:

function addListItem() { 
todoInputEl.addEventListener("keypress", function(event) {
    if (event.keyCode === 13) {
        let newListItem = createListItem(todoInputEl.value);
        todoListEl.insertBefore(newListItem, 
        todoListEl.childNodes[0]);
        // let newDeleteXX = createDeleteX(todoItemEls);    
        todoListEl.insertBefore(newDeleteXX, 
        // toDeleteEls.childNodes[0]);

        todoInputEl.value = "";
    }
})    

}
function createDeleteX(todoItemEls) {
    const newDeleteX = document.createElement("button");
    newDeleteX.className= "to__delete";
    newDeleteX.textContent = "X";
    return newDeleteX;
}

Ich muss alle Zeilen in Bezug auf die Löschfunktion in der Funktion addListItem () auskommentieren, da sonst nach Eingabe der Eingabetaste keine neuen Eingaben gelöscht werden.

1
Paddlepop 18 Jän. 2019 im 18:01

3 Antworten

Beste Antwort

In Ihrem Codebeispiel sucht Ihr Ereignis-Listener nach Ereignissen auf einem SPAN.

todoBodyEl.addEventListener("click", (event) => {
    if (event.target.tagName === "SPAN") {
      let li = event.target.parentNode;
      let ul = li.parentNode;
      ul.removeChild(li);
    }
  });

Wenn Sie jedoch ein neues Element erstellen, fügen Sie eine Schaltfläche hinzu.

function createDeleteX(todoItemEls) {
    const newDeleteX = document.createElement("button");
    //...
}

Durch Ändern der Schaltfläche in einen Bereich (und Kommentieren und Aufrufen) wird das Problem behoben. Siehe aktualisierten Codepen: https://codepen.io/anon/pen/vvqjQd?editors=0010

0
David784 18 Jän. 2019 im 15:27

Das funktioniert wie ein Zauber:

const getToDeleteEls = function(){ return document.querySelector(".to__delete"); }
let toDeleteEls = getToDeleteEls(), i = 0;
for(; i < toDeleteEls.length; i++){
  toDeleteEls[i].addEventListener("click", deleteParent);
}
function deleteParent(event){
  event.target.parentNode.parentNode.removeChild(event.parentNode);
}

(Hinweis: Mit der Funktion getToDeleteEls soll toDeleteEls aktualisiert werden, wenn ein neues Element hinzugefügt wird (damit wir den neu erstellten Bereichen Listener hinzufügen können). Seitdem habe ich jedoch festgestellt, dass ich diese Listener in einer for-Schleife hinzufügen möchte ( Dies ist auch schlecht, da dadurch viele redundante Listener erstellt werden. Ich empfehle daher, diesen Teil zu überarbeiten. Die Kernfunktionalität von "Zum Löschen auf X klicken" ist jedoch solide.)

0
Cat 18 Jän. 2019 im 15:52

Der Ereignis-Listener 'click' sollte jedem Element mit 'X' (newDeleteX) hinzugefügt werden. Sie müssen die createListItem Methode leicht ändern:

function createListItem(text) {
    const newListElement = document.createElement("li");
    newListElement.textContent = text;
    newListElement.setAttribute("class", "todo__item")

    const newDeleteX = document.createElement("span");
    newDeleteX.className= "to__delete";
    newDeleteX.textContent = "X";

    // add event listener to element with "X"
    newDeleteX.addEventListener("click", (event) => {
        event.target.parentElement.remove();
    });

    // add element with "X" to newListElement
    newListElement.appendChild(newDeleteX);

    return newListElement;
}
0
Vadi 18 Jän. 2019 im 15:43