Move LI to from one UL to another in vanilla JavaScript?
Question
I'm trying to make a very simple "to-do" list application. But I'm having trouble moving my list items from the "To-do" list, to the "Done" list.
Any help would be very appreciated.
This is my code so far.
HTML
<html>
<head>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/css.css">
<title>Inlämingsuppgift</title>
</head>
<body>
<input type="text" id="input" placeholder="Add a to-do"></input> <button onclick="addToDo()">Add</button>
<h1>To do</h1>
<ul id="list1">
</ul>
<h1>Done</h1>
<ul id="list2">
</ul>
</body>
JS
function addToDo() {
var input = document.getElementById("input").value + " ";
var list = document.getElementById("list1");
var li = document.createElement("li");
li.className = "selected";
var doneButton = document.createElement("button");
doneButton.innerHTML = "Done";
doneButton.onclick = moveToDo;
doneButton.className = "move";
li.appendChild(document.createTextNode(input));
li.appendChild(doneButton);
list.appendChild(li);
}
function moveToDo() {
document.querySelector('.move').click(function() {
document.querySelector('#list2').insertAdjacentHTML("beforeend",'<li>', document.querySelector('#list1 .selected').text(), '</li>');
document.querySelector('#list1 .selected').remove();
});
}
2 answers
solution1
2 2020-11-10 13:42:03
No need to create and delete, appending an existing element will move it:
function moveItem() { const origin = document.getElementById('origin'), target = document.getElementById('target'), el = origin.firstElementChild; if (el) target.append(el); }
<div id="container"> <input type="button" onclick="javascript:moveItem()" value="move 1 li from origin to target" /><br> <span>Origin</span> <ul id="origin"> <li>Origin entry 1</li> <li>Origin entry 2</li> <li>Origin entry 3</li> </ul> <br> <span>Target</span> <ul id="target"> </ul> </div>
solution2
0 2020-11-10 13:41:01
You are adding a click inside of a click which makes no sense and you are somehow treating DOM like jQuery since there is no click() method. You are also calling text() and there is no text method in DOM.
You just need to select the li that was clicked and move it to the other list.
function addToDo() { var input = document.getElementById("input").value + " "; var list = document.getElementById("list1"); var li = document.createElement("li"); li.className = "selected"; var doneButton = document.createElement("button"); doneButton.innerHTML = "Done"; doneButton.onclick = moveToDo; doneButton.className = "move"; li.appendChild(document.createTextNode(input)); li.appendChild(doneButton); list.appendChild(li); } function moveToDo(evt) { evt.preventDefault(); // get the button that was clicked var btn = evt.target; // find the parent li element var li = btn.closest("li"); // remove the button btn.remove(); // add the li to the other list // an element can only live in one place so it is removed from list1 document.getElementById("list2").appendChild(li); }
<input type="text" id="input" placeholder="Add a to-do"></input> <button onclick="addToDo()">Add</button> <h1>To do</h1> <ul id="list1"> </ul> <h1>Done</h1> <ul id="list2"> </ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.