从 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>