javascript - li 요소의 배열

와이즈 비즈  이 함수는단일목록 요소를 만듭니다. 이것이하는 일입니다.

요소를 만듭니다.

목록에 추가합니다.

취소 선을 추가합니다.

삭제 버튼을 추가합니다.

삭제 버튼은 목록 항목의자식 요소입니다. 그것은 onclick 리스너에서 특정 createListElement() 를 저장합니다.  그것이 속한 요소. 해당 영역에서 더 이상적인 코드는 다음과 같습니다.

li

모든 onclick 이벤트에서 function deleteListItem(e) { e.path[0].parentElement.classList.add("delete") } dBtn.addEventListener("click", deleteListItem)  클릭 한 요소입니다. 삭제 버튼에는 해당 기능을 트리거하는 자식이 없으므로 항상 삭제 버튼이됩니다. 그런 다음 상위 요소를 가져 와서 항상 올바른 목록 항목이됩니다.

관련 코드는 다음과 같습니다.

e.path[0]

A1 : function createListElement() { var li = document.createElement("li"); // creates an element "li" li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text ul.appendChild(li); //adds li to ul input.value = ""; //Reset text input //START STRIKETHROUGH // because it's in the function, it only adds it for new items function crossOut() { li.classList.toggle("done"); } li.addEventListener("click",crossOut); //END STRIKETHROUGH // START ADD DELETE BUTTON var dBtn = document.createElement("button"); dBtn.appendChild(document.createTextNode("X")); li.appendChild(dBtn); dBtn.addEventListener("click", deleteListItem); // END ADD DELETE BUTTON //ADD CLASS DELETE (DISPLAY: NONE) function deleteListItem(){ li.classList.add("delete") } //END ADD CLASS DELETE } 동안  트리거, createListElement  단일 var li = document.createElement("li") 를 만들 것입니다  요소, li 에 의해 DOM에 추가

A2 : ul.appendChild(li)  버튼 요소를 만들고 var dBtn = document.createElement("button"); 에 추가하십시오   li 의 요소 .

li.appendChild(dBtn)  버튼을 클릭하면 해당 버튼에 클릭 이벤트를 추가하면 정의 된 dBtn.addEventListener("click", deleteListItem); 가 트리거됩니다.  기능. 그리고 deleteListItem 에서  기능 :

deleteListItem

function deleteListItem(){ li.classList.add("delete") }  방금 만든 'li'요소를 나타냅니다. 따라서 그것은 li 를 추가합니다  관련 delete 클래스  요소와 숨기기 li .

li

닫기!ul을 모든li항목의 상위 컨테이너로 생각하십시오. 이 특정 예에는ul이 이미 전역 적으로 정의되어 있습니다 :

 
*Everytime the createListElement() function is triggered, does it create an array of li element?

var ul = document.querySelector("ul");