Why is my .parentNode returning undefined?

Question

I´m trying to make a simple To-do List, and I want it to have a button to add the tasks that I want and another button to remove all tasks but when I click the delete button I get an error: "Cannot read property 'removeChild' of undefined" I don´t know why it says the parentNode is undefined. Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>To do List</title>
</head>
<body>
    <header>
        <h1>To-do List</h1>
        <div id="form">
            <input type="text" name="" id="tarefa" value="Add an item!">
            <button id="submit">Submit</button>
            <button id="delete">Clear List</button>
        </div>
    </header>
    <main>
        <ul id="lista">
            <li id="112">Test1</li>
            <li>Test2</li>
        </ul>
    </main>
    <script src="javascript.js"></script>
</body>
</html>

//Javascript file
const tarefa = document.getElementById("tarefa")
const adicionar = document.getElementById("submit")
const limpar = document.getElementById("delete")
const padre = document.getElementById("lista")
const fpp = document.querySelectorAll("li") 

//Add the tasks
function enviar(e){
    var coisa = document.createElement("li")
    let escrito = tarefa.value;
    padre.appendChild(coisa)
    coisa.innerHTML = escrito
    
}
//Delete the tasks
function apagar(e){
    fpp.parentNode.removeChild(fpp)
    console.log("aaaa")
}

adicionar.addEventListener("click",enviar)
limpar.addEventListener("click",apagar)

so where is `fds` defined? `fpp` is a HTML Collection, there is no parentNode on an HTML collection. — epascarello, Aug 17 '21 at 20:08
Maybe your `const fpp = document.querySelectorAll("li")` is running before the dom is finished loading and it needs to be called in an `onload` function. — AaronJ, Aug 17 '21 at 20:08
Actually `.querySelectorAll()` returns a list, not one element. So `.parentElement` should never work there. — AaronJ, Aug 17 '21 at 20:09
https://stackoverflow.com/questions/52128519/what-type-of-data-does-queryselectorall-return — epascarello, Aug 17 '21 at 20:10
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — evolutionxbox, Aug 17 '21 at 20:10

score 0 · Answer 1 · answered Aug 17 '21 at 20:15

0

How about

function apagar(){
  padre.innerHTML = "";
}

answered Aug 17 '21 at 20:15

James

20,957
5
26
41

Jacob · Accepted Answer · 2021-08-17T20:55:13.263

0

.querySelectorAll returns a NodeList (because you're selecting all li tags, not just one), so you need to do a forEach loop. Give the context, I asume fds is supposed to be fpp (you never define fds in the code you provided), so here is the code you would need, given that assumption:

function apagar(e){
  fpp.forEach(function(el) {
    el.parentNode.removeChild(el)
  })
}

Update

Use this so that you dont get null errors once the list is deleted the first time.

function apagar(e){
  document.querySelectorAll("li").forEach(function(el) {
    el.parentNode.removeChild(el)
  })
}

edited Aug 17 '21 at 20:55

answered Aug 17 '21 at 20:16

Jacob

1,697
8
17

I get an error saying: Unexpected token '>' – André Santos Aug 17 '21 at 20:24
@AndréSantos Yes, I accidentally used a technique from a different version of JS, I made an edit a bit ago to do it correctly – Jacob Aug 17 '21 at 20:30
So now instead of undifined it says null -> "Cannot read property 'removeChild' of null" – André Santos Aug 17 '21 at 20:40
Correct, given your code, you only grab the `li` elements, so once they are deleted, you will get an error. I have provided another snippet to take care of that problem by grabbing all the `li` elements each time the button is clicked – Jacob Aug 17 '21 at 20:57

Why is my .parentNode returning undefined?

2 Answers2

Update