未定义removeChild()

Question

    <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(段落))，但似乎不起作用。每次都会出现错误"removeChild is not defined“。我该如何解决这个问题呢？

Answer 1

​

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。

Answer 2

我用div替换了paragraph，因为我更喜欢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>

​