How to move text from one place to another

Question

Here is the code block I created to make my to do list (this code is kept inside of a javascript library)

 function addItem() { 
  var newItem = document.createElement("div"); 
  newItem.innerHTML = document.getElementById("box").value; 
  newItem.onclick = removeItem; 
  document.getElementById("list").appendChild(newItem); 
   saveList();
 } 
 function saveList() { 
  localStorage.storedList = document.getElementById("list").innerHTML; 
 } 
 function loadList() { 
  document.getElementById("list").innerHTML = localStorage.storedList; 
  for(var i = 0; i < list.children.length; i++) { 
   list.children[i].onclick = removeItem;
 } 
}

This code is not kept inside of a javascript library.

 <script>
   function removeItem() { confirm("Mark task as completed?"); saveList(); } 
 </script>


 <input type="text" id="box" placeholder="Type here to add task" 
  onKeyDown="if(event.keyCode==13) addItem();"/> <br/> 
 <button class="button" onclick="addItem();" style="float left;">
  <span>Add task</span> 
 </button> <br/><br/><br/>

<div class="title">
 <strong>Tasks:</strong>
</div>

<div class="noselect">
 <p>____________________________________________________</p>
</div><br/>

<div id="list"></div>

<div class="noselect">
 <p>____________________________________________________</p>
</div><br/><br/>

<div class="title">
 <strong>Completed:</strong>
</div>

<div class="noselect">
 <p>____________________________________________________</p>
</div><br/>

<div id="list2"></div>

<div class="noselect">
 <p>____________________________________________________</p>
</div>

What I want to happen is when they click on the task and agree to mark it as completed, I want it to be removed from list1 and be added to list2.

Here is the link: https://aaronproductions.neocities.org/To_Do_List.html

This is NOT a duplicate because the possible duplicates solution does NOT fix my problem.

Answer 1

You could do the following

function onclickHandler(event){
    var target = event.target || event.srcElement;
    var targetValue = target.innerText;
    addItem(targetValue, document.getElementById('list2');
    target.parentNode.removeChile(target);
}

function addItem(value, list){
    var newItem = createElement(value);
    list.appendChild(newItem);
}

function createElement(value){
    var item = document.createElement('div');
    item.innerText = value;
    return item;

}

The "onclickHandler" should be attached to every item in "list1"