首頁猿問從 DOM 中移除元素

從 DOM 中移除元素

JavaScript

小怪獸愛吃肉 2023-03-18 17:06:19

當我嘗試刪除一個時，我在 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>

查看完整描述

1 回答

慕的地8271018

TA貢獻1796條經驗獲得超4個贊

解決方案

HTML:

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

反對回復 2023-03-18

1 回答
0 關注
128 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

從 DOM 中移除元素

從 DOM 中移除元素

1 回答

你的錯誤

一種不同的方法

添加回答