CSS 列表頁(yè)批量刪除功能在 Web 開發(fā)中是一個(gè)相對(duì)常見的功能，實(shí)現(xiàn)該功能可以幫助用戶快速刪除列表中的多項(xiàng)數(shù)據(jù)。

具體實(shí)現(xiàn)方式是通過(guò)添加“刪除”按鈕，點(diǎn)擊后觸發(fā) JavaScript 代碼來(lái)完成批量刪除功能。

<ul class="list">
<li>列表項(xiàng)1 <button class="delete">刪除</button></li>
<li>列表項(xiàng)2 <button class="delete">刪除</button></li>
<li>列表項(xiàng)3 <button class="delete">刪除</button></li>
<li>列表項(xiàng)4 <button class="delete">刪除</button></li>
</ul>
<script>
const deleteBtns = document.querySelectorAll('.delete');
const listItems = document.querySelectorAll('.list li');
deleteBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
listItems[index].remove();
})
})
</script>

以上代碼中，我們首先獲取了所有的“刪除”按鈕和列表項(xiàng)，并通過(guò)forEach()方法給每個(gè)“刪除”按鈕都添加了點(diǎn)擊事件。當(dāng)用戶點(diǎn)擊“刪除”按鈕時(shí)，我們直接調(diào)用remove()方法將對(duì)應(yīng)的列表項(xiàng)從 DOM 中移除。