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

CodePudding user response：

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:

Show code snippet

// 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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

---

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.