时间戳

首页 > 解决方案 > （JS 事件委托）如何删除目标元素？

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

问题描述

我现在正在为事件委托苦苦挣扎一个星期。

单击“删除”按钮时，我试图删除“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();
        }
    });

'''

标签： javascripteventsdelegation

解决方案

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

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

希望这可以帮助任何在同样问题上苦苦挣扎的人。

推荐阅读