removeChild() 未定义

如何解决removeChild() 未定义

    <script type="text/javascript">
        function create() {
            var paragraph = document.createElement("p");
            var item = document.getElementById("todo").value;
            paragraph.addEventListener("click",removeChild(paragraph));
            paragraph.innerHTML = item;
            document.body.appendChild(paragraph);
        }
    </script>
    <div>
        <h1>To Do List</h1>
        <input type="text" id="todo" placeholder="What To Do"><br>
        <button type ="button" onclick="create()">Add</button>
    </div>

我正在创建待办事项列表，但在删除项目时遇到问题。我试过了 setAttribute("onclick",removeChild(paragraph)) 但这似乎不起作用。每次都会出现错误“removeChild 未定义”。我该如何解决这个问题？

解决方法

function create() {
    var paragraph = document.createElement("p");
    var item = document.getElementById("toDo").value;
    paragraph.innerHTML = item;
    document.body.appendChild(paragraph);
    paragraph.addEventListener("click",function(){document.body.removeChild(paragraph)});
}

<h1>To Do List</h1>
<input type="text" id="toDo" placeholder="What To Do"><br>
<button type ="button" onclick="create()">Add</button>

您还必须调用 document.body.removeChild 而不仅仅是 removeChild。

,

我已将 paragraph 替换为 div 因为我更喜欢 div 而不是 HTML 中的所有内容，但以下代码对两者都适用

<script type="text/javascript">
  function create() {
    const pdiv = document.createElement("div");
    const item = document.getElementById("toDo").value;
    pdiv.addEventListener("click",() => {
      pdiv.remove();
    });
    pdiv.innerHTML = item;
    document.body.appendChild(pdiv);
  }
</script>
<div>
  <h1>To Do List</h1>
  <input type="text" id="toDo" placeholder="What To Do"><br>
  <button type="button" onclick="create()">Add</button>
</div>