在 JavaScript 中在两个列表之间移动项目

Question

我想在两个列表之间移动项目。所有列表项中都有按钮，单击此按钮后，项目应移动到其他列表。我已经创建了 JavaScript 事件，但它只能以一种方式工作 - 因此该项目可以移动一次，例如从 list1 到 list2，但当我尝试再次单击该按钮时，它不起作用。您能看一下我的代码并建议我如何将我的事件也分配给新创建的项目（这些刚刚被移动的项目）吗？

 document.addEventListener("DOMContentLoaded", function () {

    var buttons = document.querySelectorAll(".moveBtn");

    var list1 = document.getElementById("list1");

    var list2 = document.getElementById("list2");

        function moveItem(e) {
        var newItem = document.createElement("li");

        if (this.parentElement.parentElement.id === "list1") {
            list2.appendChild(newItem);


        } else {
            list1.appendChild(newItem);

        }

        newItem.innerHTML = this.parentElement.innerHTML;
        this.parentElement.parentNode.removeChild(this.parentElement);

    }

    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", moveItem);
    }

 })

Answer 1

只需移动元素即可，而不是销毁旧元素并创建新元素：

function moveItem(e) {
    var moveTo = this.parentElement.parentElement.id == "list1" ? list2 : list1;
    moveTo.appendChild(this.parentElement);
}

另请注意，无需匹配id; 您可以匹配实际元素：

function moveItem(e) {
    var moveTo = this.parentElement.parentElement == list1 ? list2 : list1;
    moveTo.appendChild(this.parentElement);
}

实例：

function moveItem(e) {
    var moveTo = this.parentElement.parentElement.id == "list1" ? list2 : list1;
    moveTo.appendChild(this.parentElement);
}

function moveItem(e) {
    var moveTo = this.parentElement.parentElement == list1 ? list2 : list1;
    moveTo.appendChild(this.parentElement);
}

document.addEventListener("DOMContentLoaded", function() {
    var buttons = document.querySelectorAll(".moveBtn");
    var list1 = document.getElementById("list1");
    var list2 = document.getElementById("list2");

    function moveItem(e) {
        var moveTo = this.parentElement.parentElement == list1 ? list2 : list1;
        moveTo.appendChild(this.parentElement);
    }

    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", moveItem);
    }
});