如何使用 JS 中的 Onclick 将元素从一侧移动到另一侧？

Question

I have a to do list program where the user enters an item that gets added onto a list. The problem is that when I click on the items, the items stay inside of the To Do list rather than being moved to the Done list. What I'm trying to do is move my elements from my to do list to my done list after the user clicks on the items which checks the items as completed. I am wondering how to receive the desired results with this program which is to move clicked elements from the to do list to the done list. Here is the code that you can test out yourself: https://jsfiddle.net/g60dx2e1/

 // Create a "close" button and append it to each list item var myNodelist = document.getElementsByTagName("LI"); var i; for (i = 0; i < myNodelist.length; i++) { var span = document.createElement("SPAN"); var txt = document.createTextNode("\×"); span.className = "close"; span.appendChild(txt); myNodelist[i].appendChild(span); } // Click on a close button to hide the current list item var close = document.getElementsByClassName("close"); var i; for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; } } // Add a "checked" symbol when clicking on a list item var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if (ev.target.tagName === 'LI') { ev.target.classList.toggle('checked'); } }, false); // Create a new list item when clicking on the "Add" button function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') { alert("You must write something!"); } else { document.getElementById("myUL").appendChild(li); } document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\×"); span.className = "close"; span.appendChild(txt); li.appendChild(span); for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; } } } function newFunction() { var todos = document.getElementById("myUL"); if (todos) { todos.innerHTML = ''; } }

 <form id="todo" style="float:left"> <h1 id="todo" style="font-family:Helvetica; color:#006600"><b>To Do</b> <input type="text" id="myInput" placeholder="Add Item"> <span onclick="newElement()" class="addBtn">Add</span> <input type="button" onclick="newFunction()" value="Clear"> <ul id="myUL"> </ul> </h1> </form> <form id="done" style="float:right"> <h2 id="done" style="font-family:Helvetica; color:#006600"><b>Done</b> <input type="button" onclick="NewFunction()" value="Clear"></h2> <ul id="myUL"> </ul> </form>

Answer 1

Add a click event on the list that removes the element and moves it to the other list:

document.getElementById("myUL").onclick = (e) => {
  document.getElementById("myUL").removeChild(e.srcElement);
  document.getElementById("myUL2").appendChild(e.srcElement);
};

Note: you have both lists with id="myUL" . You should make them different as I have in the code.