点击按钮切换DOM元素增删功能的实现问题求助

问题根源 #

代码无法移除元素的核心原因：

• newdiv 和 body 变量的作用域被限制在 if 代码块内，else 块无法访问这些变量
• 没有保留新增元素的引用，也没有统一标识用于查找待移除的元素

修复后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body id="body">
    <div class="container">
        <button id="button">Hello world</button>
    </div>
</body>
</html>

CSS

body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}
button{
    width: 300px;
    height: 100px;
    cursor: pointer;
    font-size: 2em;
    border: 1px solid black;
    border-radius: 20px;
    background-color:transparent;
    color: black;
    transition: all 0.3s ease;
}
.para{
    background-color:#196997;
    color: white;
}
.new{
    width: 200px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}

JavaScript

// 缓存DOM元素，避免重复查询
const button = document.getElementById('button');
const body = document.getElementById('body');
// 保留新增元素的引用
let addedDiv = null;

button.addEventListener('click', () => {
    const isBlue = button.classList.toggle('para');
    
    if (isBlue) {
        addedDiv = document.createElement('div');
        addedDiv.classList.add('new');
        body.appendChild(addedDiv);
    } else {
        if (addedDiv && addedDiv.parentNode) {
            body.removeChild(addedDiv);
            addedDiv = null; // 清空引用，避免内存泄漏
        }
    }
});

关键优化点 #

• 缓存DOM元素：提前获取button和body元素，避免每次点击重复执行getElementById，提升性能
• 替换内联事件：将onclick内联属性改为addEventListener，代码更易维护，符合现代JS规范
• 保留元素引用：用全局变量addedDiv存储新增元素的引用，确保移除时能准确找到目标
• 添加边界判断：移除前检查元素是否存在且有父节点，避免报错
• CSS体验优化：清除body默认边距，给按钮加过渡动画提升交互感，给新增元素加定位避免影响按钮布局

内容的提问来源于stack exchange，提问作者denis kiplangat