*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
*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를 꼭 해야 한다.
'TIL > TIL' 카테고리의 다른 글
createElement, instance in JS (0) | 2020.02.18 |
---|---|
event.target VS event.currentTarget (0) | 2020.02.17 |
새로운 데이터 값 id 주기 JSON, array.length + 1 (0) | 2020.02.16 |
Math.floor(Math.random() * (max - min)) + min 범위 구하기. (0) | 2020.02.15 |
회원가입 DOM, form validation 설계 (0) | 2020.02.14 |
comment