正文

掌握HTML与JS，轻松实现多选删除功能

/0 浏览量
0323

在网页开发中，多选删除功能是一个常见的需求。通过HTML和JavaScript，我们可以轻松实现这一功能。本文将详细介绍如何使用这两种技术来实现一个多选删除功能。

准备工作

在开始之前，我们需要准备以下内容：

  1. HTML结构：创建一个列表，列表项中包含复选框和删除按钮。
  2. CSS样式：为列表和按钮添加一些基本的样式。
  3. JavaScript代码：编写JavaScript函数来处理多选删除的逻辑。

HTML结构

以下是一个简单的HTML结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多选删除功能</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul id="itemList">
        <li>
            <input type="checkbox" class="checkbox">
            <span>项目1</span>
            <button class="deleteBtn">删除</button>
        </li>
        <li>
            <input type="checkbox" class="checkbox">
            <span>项目2</span>
            <button class="deleteBtn">删除</button>
        </li>
        <!-- 更多列表项 -->
    </ul>
    <button id="deleteSelected">删除选中的项</button>
    <script src="script.js"></script>
</body>
</html>

CSS样式

接下来，我们为列表和按钮添加一些基本的样式：

/* styles.css */
#itemList {
    list-style-type: none;
    padding: 0;
}

#itemList li {
    margin-bottom: 10px;
}

.checkbox {
    margin-right: 10px;
}

.deleteBtn {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

JavaScript代码

最后，我们编写JavaScript代码来实现多选删除功能：

// script.js
document.addEventListener('DOMContentLoaded', function() {
    var deleteSelectedBtn = document.getElementById('deleteSelected');
    deleteSelectedBtn.addEventListener('click', function() {
        var checkboxes = document.querySelectorAll('.checkbox');
        checkboxes.forEach(function(checkbox) {
            if (checkbox.checked) {
                checkbox.parentElement.remove();
            }
        });
    });
});

这段代码中，我们首先获取到删除按钮，并为它添加一个点击事件监听器。当按钮被点击时，我们遍历所有的复选框，如果复选框被选中，则移除其父元素（即列表项）。

总结

通过以上步骤，我们成功实现了一个多选删除功能。用户可以通过复选框选择要删除的项，然后点击“删除选中的项”按钮来删除它们。这个功能在网页开发中非常实用，可以帮助用户更方便地管理数据。

-- 展开阅读全文 --