Delete local storage data

*appendChild()

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node. 

*parentNode

The Node.parentNode read-only property returns the parent of the specified node in the DOM tree.

 

*removeChild()

The Node.removeChild() method removes a child node from the DOM and returns the removed node.

https://www.w3schools.com/jsref/met_node_removechild.asp

HTML DOM removeChild Method

 

 

 

 

 

 

*filter() - filter후 조건을 준 값만 추려서 새로운 array로 만든다. [create an array with 'returned true' items]

const newToDos = toDos.filter(function(toDo) {

  return toDo.id !== parseInt(btnLi.id);

});

*isNaN   -  return true or false

*type of - return "STRING" or NUMBER

  

*parseInt =>  (String 을  Number 변환 시켜준다.)

 

* DELETE => SAVE  

delete했으면, save해서 => 새로운 data를 불러와야 한다.

 

 

 

function deleteToDo(event) {

const btn = event.target;

const btnLi = btn.parentNode;

toDoList.removeChild(btnLi); 

 

const newToDos = toDos.filter(function(toDo) {

 

return toDo.id !== parseInt(btnLi.id);

   // toDo.id => number

   // btnLi.id => String (inside the element)

   // number로 변환해서 array에 넣는다. parseInt

   // isNaN(), typeOf => string or number

});

 

toDos = newToDos;

saveToDos();

}

 

function saveToDos() {

localStorage.setItem(TODOS_LS, JSON.stringify(toDos));

}

 

 

filter( ) 사용해서 새로운 data들만 return 한다. 

이벤트.ID 와 기존 data.id 다른 데이터들을 비교해서 return한다. 

return toDo.id !== parseInt(btnLi.id);

 

toDos = newToDos;   => 새로운 data를 만든다. 

saveToDos(); => save를 꼭 해야 한다.