從 DOM 中刪除元素

Question

當我嘗試刪除li時，我在 JavaScript 中遇到了一個問題，它將刪除整個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>

JavaScript：

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();
});

工作示例： https : //codesandbox.io/s/pensive-almeida-z82lr?file=/index.html : 262-561

---

你的錯誤

您的錯誤是您試圖從其代碼塊外部獲取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>