能否创建与移除div？Web Dashboard方块增删低JS实现方案咨询

嘿，让我来逐个解答你的问题：

当然可以！创建和移除div元素主要有两种实用方式：

• 借助JavaScript：这是最灵活的方案，能实现完全动态的创建（比如用document.createElement('div')生成新元素）和移除（用element.remove()删除元素），适合需要无限生成元素或者复杂交互的场景。
• 纯HTML+CSS实现：虽然没法做到完全无限制的动态生成，但对于简单需求（比如你的学校项目），可以通过预定义元素配合CSS伪类来模拟“创建/移除”的视觉效果。

绝对可以！虽然没法像JS那样无限生成新方块，但对于学校项目的演示需求，我们用HTML+CSS的小技巧就能搞定，完全不用写一行JS代码。下面给你一个现成的实现方案：

核心思路 #

我们先预创建几个方块（数量可以自己调整），默认隐藏；然后用隐藏的复选框配合<label>做“添加按钮”——每次点击按钮就切换对应复选框的状态，通过CSS的:checked伪类和兄弟选择器来显示对应的方块。移除功能也用同样的逻辑，给每个方块加个“删除”按钮（还是label），点击就隐藏方块。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 仪表盘容器样式 */
        .dashboard {
            padding: 20px;
            gap: 15px;
            display: flex;
            flex-wrap: wrap;
            background: #f5f5f5;
            border-radius: 8px;
        }

        /* 方块基础样式 */
        .square {
            width: 150px;
            height: 150px;
            background: #4285F4;
            border-radius: 8px;
            display: none; /* 默认隐藏 */
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;
        }

        /* 删除按钮样式 */
        .delete-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            cursor: pointer;
            background: rgba(0,0,0,0.3);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 14px;
            transition: background 0.2s;
        }

        .delete-btn:hover {
            background: rgba(0,0,0,0.5);
        }

        /* 隐藏所有复选框 */
        .toggle-checkbox {
            display: none;
        }

        /* 添加按钮样式 */
        .add-btn {
            padding: 10px 20px;
            background: #34A853;
            color: white;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            margin: 20px;
            display: inline-block;
            transition: background 0.2s;
        }

        .add-btn:hover {
            background: #2E8B57;
        }

        /* 点击添加按钮，显示对应方块 */
        #add-1:checked ~ .dashboard #square-1 {
            display: flex;
        }

        #add-2:checked ~ .dashboard #square-2 {
            display: flex;
        }

        #add-3:checked ~ .dashboard #square-3 {
            display: flex;
        }

        /* 点击删除按钮，隐藏对应方块 */
        #delete-1:checked ~ .dashboard #square-1 {
            display: none;
        }

        #delete-2:checked ~ .dashboard #square-2 {
            display: none;
        }

        #delete-3:checked ~ .dashboard #square-3 {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 添加按钮 -->
    <label for="add-1" class="add-btn">添加方块1</label>
    <label for="add-2" class="add-btn">添加方块2</label>
    <label for="add-3" class="add-btn">添加方块3</label>

    <!-- 隐藏的切换复选框 -->
    <input type="checkbox" id="add-1" class="toggle-checkbox">
    <input type="checkbox" id="add-2" class="toggle-checkbox">
    <input type="checkbox" id="add-3" class="toggle-checkbox">
    <input type="checkbox" id="delete-1" class="toggle-checkbox">
    <input type="checkbox" id="delete-2" class="toggle-checkbox">
    <input type="checkbox" id="delete-3" class="toggle-checkbox">

    <!-- 仪表盘容器 -->
    <div class="dashboard">
        <div id="square-1" class="square">
            方块1
            <label for="delete-1" class="delete-btn">删除</label>
        </div>
        <div id="square-2" class="square">
            方块2
            <label for="delete-2" class="delete-btn">删除</label>
        </div>
        <div id="square-3" class="square">
            方块3
            <label for="delete-3" class="delete-btn">删除</label>
        </div>
    </div>
</body>
</html>

方案细节说明 #

• 这个方案完全零JS，只靠HTML和CSS就能实现点击添加、点击删除方块的功能。
• 如果你需要更多方块，只要复制对应的<label>、<input>和<div>元素就行，非常好扩展。
• 样式可以根据你的需求调整，比如方块颜色、大小、按钮样式，直接改CSS就行。
• 唯一的小限制是不能无限生成方块，但对于学校项目的演示来说，这个完全够用啦。

内容的提问来源于stack exchange，提问作者Tyrique Weltevreden