cloneNode without losing event listener

how can i move my html element without losing the event listener attached to the button?

The child button’s event listener does not work after cloning and removing the original element

ul.appendChild(element.cloneNode(true));
element.remove();

Answer

You’ve said you want to move it, but what you’re doing is cloning it, saving the clone, and then removing and throwing away the original. Instead, don’t clone it, move it:

ul.appendChild(element);

That will remove element from its current parent and put it in its new parent (ul), with all event listeners still in place.

Live Example:

// NOTE: This isn't how I'd write this code if I weren't demonstrating
// the fact the listeners are retained when the element is moved.
// But without context, it's hard to show a delegation solution.

const list1 = document.getElementById("list1");
const list2 = document.getElementById("list2");

// Add a listeneer to each `li`
document.querySelectorAll("li").forEach((li, index) => {
    li.addEventListener("click", () => {
        console.log(`Moving "${li.textContent}" which was originally at index ${index}`);
        if (li.closest("ul") === list1) {
            // Move from list1 to list2
            list2.appendChild(li);
        } else {
            // Move from list2 to list1
            list1.appendChild(li);
        }
    });
});

li {
    cursor: pointer;
}

<div>List 1:</div>
<ul id="list1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<div>List 2:</div>
<ul id="list2">
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>
<div>Click an item to move it to the other list.</div>

---

That said, I often find event delegation to be best when working with elements that move between parents, but it really depends on the situation.