1

Estoy desarrollando este todo-list con html, css y js Cada item de la lista tiene un checkbox para marcarlo cuando la tarea ha sido realizada, y un botón para eliminarla. Al presionar el boton borrar recibo el siguiente error:

app.js:30 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'. at trashItem (app.js:30) at app.js:45 trashItem @ app.js:30 (anonymous) @ app.js:45

Éste es el código javaScript que estoy aplicando:

const deleted= document.getElementsByClassName("delete");
const list= document.getElementById("list");
const input= document.getElementById("input");
const item= document.getElementById("item");
const checked= document.getElementsByClassName("check");

function trashItem(){
    list.removeChild(item);
}

function addToDo(itemValue){

    itemValue= input.value;
    const text= `
                <li id="item">
                    <p class="text">${itemValue}</p>
                    <input type="checkbox" class="check" >
                    <input type="button" class="delete">
                </li> `;
    list.insertAdjacentHTML("beforeend",text);
    console.log(list)
}
deleted.addEventListener("click",trashItem());
document.addEventListener("keyup",(event)=>{ if(event.keyCode===13){addToDo()}});

Y a continuación adjunto el html de la tarea:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">

    <title>To Do List</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="clear">
                <i class="refresh" aria-hidden="true"></i>
            </div>
            <div id="date"></div>
        </div>
        <div class="add-item">
            <input type="text" id="input" placeholder="Add Something to Do">
            <button type="submit" id="button" onclick="addToDo()">Click Me</button>
        </div>
        <div class="content">
            <ul id="list">
            </ul>
        </div>

    </div>
    <script src="app.js/app.js"></script>
</body>
</html>

1 respuesta 1

1

Estas asignando mal el evento

const deleted = document.getElementsByClassName("delete");

esto no selecciona nada porque al iniciar la aplicación no hay elementos al cual asignarle la funcion trashItem de modo que deberas asignarle los eventos a cada item que agregas

const deleted = document.getElementsByClassName("delete");
const list= document.getElementById("list");
const input= document.getElementById("input");
const item= document.getElementById("item");
const checked= document.getElementsByClassName("check");

let toDo = []

function trashItem(){
    list.removeChild(this);
}

function addToDo(itemValue){

    itemValue= input.value;
    toDo.push(itemValue)
    
    var li = document.createElement("li");
    const text= `<p class="text">${itemValue}</p>
                <input type="checkbox" class="check" >
                <input type="button" class="delete" value="Borrar"> `;
    li.innerHTML = text;
    li.classList.add('item')
    
    list.appendChild(li);
    addEvents(li)
}

function addEvents(item){
  item.addEventListener("click", trashItem);
}

document.addEventListener("keyup",(event)=>{ if(event.keyCode===13){addToDo()}});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">

    <title>To Do List</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="clear">
                <i class="refresh" aria-hidden="true"></i>
            </div>
            <div id="date"></div>
        </div>
        <div class="add-item">
            <input type="text" id="input" placeholder="Add Something to Do">
            <button type="submit" id="button" onclick="addToDo()">Click Me</button>
        </div>
        <div class="content">
            <ul id="list">
            </ul>
        </div>

    </div>
    <script src="app.js/app.js"></script>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.