为啥我的 .parentNode 返回未定义？ [复制]
Posted
技术标签:
【中文标题】为啥我的 .parentNode 返回未定义？ [复制]【英文标题】：Why is my .parentNode returning undefined? [duplicate]为什么我的 .parentNode 返回未定义？ [复制] 【发布时间】：2021-10-19 17:15:38 【问题描述】：我正在尝试制作一个简单的待办事项列表，并且我希望它有一个按钮来添加我想要的任务和另一个按钮来删除所有任务，但是当我单击删除按钮时出现错误： “无法读取未定义的属性'removeChild'”我不知道为什么它说父节点未定义。 代码如下：
<!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)
【问题讨论】：
那么fds 是在哪里定义的？ fpp 是一个 HTML 集合，HTML 集合上没有 parentNode。
也许你的const fpp = document.querySelectorAll("li")在dom完成加载之前就已经运行了，需要在onload函数中调用它。
其实.querySelectorAll()返回的是一个列表，而不是一个元素。所以.parentElement 永远不应该在那里工作。
***.com/questions/52128519/…
这能回答你的问题吗？ What do querySelectorAll and getElementsBy* methods return?
【参考方案1】：
.querySelectorAll 返回一个NodeList（因为你选择了所有li 标签，而不仅仅是一个），所以你需要做一个forEach 循环。给出上下文，我假设 fds 应该是 fpp（你从不在你提供的代码中定义 fds），所以这是你需要的代码，假设：
function apagar(e)
fpp.forEach(function(el)
el.parentNode.removeChild(el)
)
更新
使用它，以便在第一次删除列表时不会出现空错误。
function apagar(e)
document.querySelectorAll("li").forEach(function(el)
el.parentNode.removeChild(el)
)
【讨论】：
我收到一条错误消息：Unexpected token '>' @AndréSantos 是的，我不小心使用了来自不同版本 JS 的技术，我之前进行了编辑以正确地做到这一点 所以现在它不是 undifined 而是显示 null -> "Cannot read property 'removeChild' of null" 正确，给定您的代码，您只能抓取li 元素，因此一旦删除它们，您将收到错误消息。我提供了另一个 sn-p 来解决这个问题，每次单击按钮时都会抓取所有 li 元素【参考方案2】：
怎么样
function apagar()
padre.innerHTML = "";
【讨论】：
以上是关于为啥我的 .parentNode 返回未定义？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章