Implement Efficient Event Delegation for Dynamic Content

document.addEventListener('DOMContentLoaded', () => {
    const listContainer = document.getElementById('dynamic-list');

    if (listContainer) {
        // Attach a single event listener to the parent container
        listContainer.addEventListener('click', (event) => {
            // Check if the clicked element matches a specific selector
            if (event.target.matches('.list-item')) {
                const itemId = event.target.dataset.itemId;
                console.log(`Clicked item with ID: ${itemId} and content: ${event.target.textContent}`);
                // Add your specific logic here for the clicked item
                event.target.classList.toggle('selected');
            } else if (event.target.matches('.delete-btn')) {
                const listItem = event.target.closest('.list-item');
                if (listItem) {
                    console.log(`Deleting item: ${listItem.textContent}`);
                    listItem.remove();
                }
            }
        });

        // Function to add new items dynamically
        document.getElementById('add-item-btn')?.addEventListener('click', () => {
            const newItem = document.createElement('li');
            const newItemCount = listContainer.children.length + 1;
            newItem.textContent = `New Item ${newItemCount}`;
            newItem.classList.add('list-item');
            newItem.dataset.itemId = `item-${newItemCount}`;

            const deleteButton = document.createElement('button');
            deleteButton.textContent = 'X';
            deleteButton.classList.add('delete-btn');
            newItem.appendChild(deleteButton);

            listContainer.appendChild(newItem);
        });
    }
});

// Example HTML structure:
/*
<ul id="dynamic-list">
    <li class="list-item" data-item-id="item-1">Item 1 <button class="delete-btn">X</button></li>
    <li class="list-item" data-item-id="item-2">Item 2 <button class="delete-btn">X</button></li>
</ul>
<button id="add-item-btn">Add New Item</button>
*/