（JS 事件委托）如何删除目标元素？

Posted 2023-03-25

【中文标题】（JS 事件委托）如何删除目标元素？

【英文标题】：(JS event delegation )How can I remove targeted element?

【发布时间】：2021-04-14 14:38:29

【问题描述】：

我已经为事件委托苦苦挣扎了一周。

单击“删除”按钮时，我正在尝试删除“li”元素。到目前为止，我已经成功地工作了，但是这背后的问题是，当我只想删除一个目标 'li' 时，所有的 'li' 项目都被删除了。

如何修复此代码？

'''

//html code for ul and li
        <div>
            <ul id="list">
            </ul> 
        </div>

    //JS code adding inner HTML code for 'edit', 'update' and 'delete' buttons
    document.querySelector(".Add").addEventListener("click", function()
        data.date.push(date.value);
        data.hours.push(hours.value);  
        const addHTML = `<li><strong>$data.date[i]</strong> You have worked $data.hours[i] hours</li><button class="edit">Edit</button><button class="update">Update</button><button class="delete">Delete</button>`
        document.querySelector('ul').insertAdjacentHTML('afterbegin', addHTML);
        i++;
    );
    
    //JS code to delete the 'li' element when 'delete' button clicked
    document.getElementById('list').addEventListener('click', function(e) 
        const tgt = e.target;
        const parent = tgt.closest('li');
    
        if(tgt.classList.contains('edit'))
            console.log('edit')
    
            
        if(tgt.classList.contains('update'))
        console.log('update')
          
        if(tgt.classList.contains('delete'))
            console.log(tgt.closest('li'))
            tgt.parentNode.remove();
        
    );

'''

【问题讨论】：

你的 HTML 看起来怎么样？

@Toxnyc 感谢您的回复！我添加了 HTML 代码。它只是 body 元素中的 'ul' 和 'li'

【参考方案1】：

等等……再努力之后，我得到了答案！ 因此，当我使用“insertAdjacentHTML”添加 HTML 代码时，我嵌套了使用元素添加的 HTML 代码。

现在当我点击目标按钮时，它会删除父元素

希望这可以帮助任何遇到同样问题的人。