从 DOM 中移除元素

Question

当我尝试删除一个 时，我在 JavaScript 中遇到了一个问题li，它会删除整个ul. 有谁知道这个的解决方案？

const add = document.querySelector(".add");

add.addEventListener("click", function() {

  const cont = document.querySelector(".menu");

  const input = document.querySelector(".put");

  const newli = document.createElement("LI");

  const text = document.createTextNode(input.value);

  cont.append(newli);

  newli.appendChild(text);

})

const remove = document.querySelector(".remove");

remove.addEventListener("click", function() {

  const df = document.querySelector(".menu");

  df.remove(newli);

})

<div class="parent-row">

  <h1>Add a new Post </h1>

  <div>

    <input type="text" class="put">

    <button class="add">Add a Post</button>

    <button class="remove">Remove a Post</button>

  </div>

  <ul class="menu">

    <li>Albenis</li>

  </ul>

</div>

</div>

</div>

</div>

Answer 1

解决方案

HTML:

<div class="parent-row">

  <h1>Add a new Post</h1>

  <div>

    <input type="text" class="put" />

    <button class="add">Add a Post</button>

    <button class="remove">Remove a Post</button>

  </div>

  <ul class="menu">

    <li>Albenis</li>

  </ul>

</div>

脚本：

const add = document.querySelector(".add");

const remove = document.querySelector(".remove");

add.addEventListener("click", function () {

  const cont = document.querySelector(".menu");

  const input = document.querySelector(".put");

  const newli = document.createElement("LI");

  newli.innerText = input.value;

  cont.append(newli);

});

remove.addEventListener("click", function () {

  const df = document.querySelector(".menu");

  df.firstElementChild.remove();

});

---

你的错误

您的错误是您试图newli从其代码块外部获取常量，请记住const变量的范围仅限于该块。

---

一种不同的方法

这种方式更简单一些，允许您删除任何帖子，而不仅仅是最后添加的帖子。

const postBtn = document.querySelector('#post')

const list = document.querySelector('#list')

postBtn.addEventListener('click', () => {

  const text = document.querySelector('#post-text')

  list.innerHTML += `<li>${text.value} <button id="remove" onclick="remove(event)">remove</button></li>`

  text.value = ''

})

const remove = (e) => {

 e.target.parentElement.remove()

}

<div>

  <h1>Make a post</h1>

  <input id="post-text" type="text" placeholder="Text"><button id="post">Post</button>

  <ul id="list">

  </ul>

</div>