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

Remove `document.querySelector('.move').click(function() {`, which is the incorrect syntax for adding a click event handler, and `doneButton.onclick = moveToDo;`, which is an old one, and just use `doneButton.addEventListener('click', moveToDo);` — Heretic Monkey, Nov 10 '20 at 13:35
Does this answer your question? [Add event handler to HTML element using javascript](https://stackoverflow.com/questions/9800310/add-event-handler-to-html-element-using-javascript) — Heretic Monkey, Nov 10 '20 at 13:36

netizen · Answer 1 · 2020-11-11T10:01:09.460

2

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>

edited Nov 11 '20 at 10:01

answered Nov 10 '20 at 13:42

netizen

1,028
7
19

A snippet could be useful. – AbsoluteBeginner Nov 10 '20 at 14:34
Added, @AbsoluteBeginner. – netizen Nov 11 '20 at 10:01

score 0 · Answer 2 · answered Nov 10 '20 at 13:41

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>

Move LI to from one UL to another in vanilla JavaScript?

2 Answers2