有人可以解釋我的函數deleteButton（this）嗎？

Question

這裏是鏈接到我的codepen看到我所有的代碼：http://codepen.io/stevengangano/full/LGvRdq/

我的問題與我的deleteButton函數有關。我很難理解這個概念。

我創建了一個名爲deleteButton（item）的刪除按鈕的函數。我只想知道「item」和「parentNode」在變量remove中代表什麼？哪一個是<ul>，哪一個是<li>？

解釋將不勝感激。謝謝！

Answer 1

deleteButton(item)附加到removeButton。 this表示按鈕本身的當前節點。

item.parentNode將只是按鈕的父母，它是li元素。 remove變量保存此li元素。

再次remove.parentNode將返回li元素的父節點，它是ul元素。

paretNode.removeChild去除從DOM

因此，在這種情況下，UL_ELEMENT.removeChild（LI_ELEMENT）子節點;

Answer 2

function deleteButton(item) { 
    var remove = item.parentNode; 
    remove.parentNode.removeChild(remove); 
} 

在你的代碼（發佈異地）是長

function deleteButton(item) { 
    item.parentNode.parentNode.removeChild(item.parentNode); 
} 

從孩子的祖父母其節點的列表中刪除單擊項目的父節點。刪除按鈕的父節點代碼爲listItem，這意味着LI項目將被刪除。

在其他地方張貼代碼異地（不好的做法™）刪除功能被定義爲

removeButton.setAttribute('onclick', 'deleteButton(this);'); 

這是認認真真地很，有趣。它建議在 HTML分析完成後設置文本爲的onclick屬性，使文本被解析爲javascript函數的源代碼，該函數將成爲屬性值。好的，二傳手可以做到這一點 - 但事件制定者這樣做對我來說是新聞。測試表明它是真實的。

因此，一個答案是設置與文本節點的onclick屬性編譯文本到功能對象，附加的功能對象作爲onclick屬性值，其中，當通過點擊用品節點稱爲被點擊作爲this onclick處理程序的對象。如果調用的函數移除被單擊對象的父節點，則在這種情況下，LI元素將被移除。