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

Question

I am struggling with event delegation for a week now.

I am trying to remove 'li' element when 'delete' button clicked. so far, I have managed to work, however the problem behind that is, all 'li' items are deleted when I just want a single targeted 'li' to be deleted.

How can I fix this code?

'''

//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();
        }
    });

'''

Answer 1

wait... after putting more effort, I got the answer, So when I added HTML code using 'insertAdjacentHTML'. I nested the HTML coded added with element.

Now when I click the targeted button, it will delete the parent element which is

Hope this helps anyone struggling with the same issue.