在构建现代 Web 应用程序时，经常需要动态地添加或删除页面上的元素。例如，在一个问卷创建应用中，用户可以动态添加问题，并在每个问题下添加多个选项。当这些选项被动态创建后，如何允许用户删除其中任意一个，是一个常见的挑战。为每个动态生成的“删除”按钮单独绑定事件监听器效率低下且难以维护，尤其当元素数量众多时。

核心概念：事件委托

事件委托（Event Delegation）是解决动态元素事件处理问题的关键技术。其核心思想是将事件监听器绑定到父元素上，而不是每个子元素。当子元素上的事件被触发时，事件会沿着 DOM 树冒泡到父元素，父元素上的监听器捕获到事件后，可以通过 event.target 属性判断是哪个子元素触发了事件，并执行相应的操作。这种方式有以下优点：

1. 性能优化： 只需一个监听器，减少内存消耗。
2. 代码简洁： 无需在每次添加新元素时都绑定事件。
3. 动态适应： 自动处理未来添加的元素。

实现动态元素删除

我们将以一个问卷应用为例，演示如何删除一个动态生成的“选项”（

元素）。

1. HTML 结构调整

首先，我们需要确保每个可删除的选项内部含有一个清晰的“删除”标识，以便事件委托机制能够准确识别。这里我们不再使用独立的 标签作为删除按钮，而是采用一个带有特定类名的 标签，它更轻量且易于样式化。

立即学习“Java免费学习笔记（深入）”；

修改 newOption 函数，在每个

AdMaker AI

从0到爆款高转化AI广告生成器

下载

function newOption(q) {
    q.insertAdjacentHTML('beforeend',
        `

            选项
            
            X 
         
`);
}

const questionnaire = document.getElementById('questionaire');

// ... (newQuestion 和 newOption 函数按上述修改) ...

questionnaire.onclick = ev => {
    // 处理“添加选项”按钮点击
    if (ev.target.tagName === "BUTTON" && ev.target.classList.contains("addButton")) {
        newOption(ev.target.closest(".question").querySelector('ul'));
    }
    // 处理“删除选项”标识点击
    else if (ev.target.classList.contains('remove-li')) {
        ev.target.parentNode.remove(); // 移除其父元素（即整个 
）
    }
};

// ... (其他事件绑定，如addQuButton) ...

3. 完整示例代码

下面是整合了 HTML、CSS 和 JavaScript 的完整示例，展示了如何实现动态添加和删除问卷选项的功能。

HTML (index.html):

    
    
    
    


    
我的问卷名称
    添加问题
    

        

    

    

CSS (style.css):

body {
    background-color: #f0f0f0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 20px;
}

#myText {
    margin-top: 15px;
    text-align: center;
    color: #333;
}

#addQuButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#addQuButton:hover {
    background-color: #45a049;
}

.question {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 30px auto;
    padding: 20px;
    max-width: 800px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.question > div[contenteditable="true"] {