從UL中刪除for循環（JS）

我試圖從按鈕被單擊時從列表中刪除項目。從UL中刪除for循環（JS）

的jsfiddle這裏 - https://jsfiddle.net/y3u47f11/15/

HTML

<ul class="list"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 

<a class="btn" onclick="emptyList()">clear list</a>

window.emptyList = function() { 
    var ul = document.querySelector('.list'); 
    var listLength = ul.children.length; 

    for (i = 0; i < listLength; i++) { 
    ul.childNodes[i].removeChild(); 
    } 

    // this works 
    // ul.innerHTML = ""; 

}

的問題是，當我按一下按鈕只有幾個項目從列表中移除例如在上面的例子中，我點擊'清除列表'按鈕一次，項目1,3和5被刪除。我再次單擊該按鈕，並刪除項目2。最後在第三次單擊列表被清空。

如果我設置ul.innerHTML =「」;我實際上可以很容易地刪除元素。

但我似乎無法弄清楚爲什麼emptyList函數沒有按預期工作，並會感謝任何見解我到哪裏去錯了。

感謝，

來源

2017-03-17 Jon K

什麼'ul.children.length'返回？ –

的chlidren或childNodes是活element collection(HTMLCollection)所以索引可以之後的每個刪除更新，因此在指數0刪除元素。雖然在父節點上應用removeChild並添加元素作爲參數。

window.emptyList = function() { 
 
    var ul = document.querySelector('.list'); 
 
    var listLength = ul.children.length; 
 

 
    for (i = 0; i < listLength; i++) { 
 
    ul.removeChild(ul.children[0]); 
 
    } 
 
}

<ul class="list"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
</ul> 
 

 
<a class="btn" onclick="emptyList()">clear list</a>

FYI：的childNodes包括文本節點，以便使用chlidren屬性。

來源

2017-03-17 08:57:46

感謝Pranav提供的解決方案和解釋。這很好。也感謝其他人的其他答案。 –

@JonK：很高興幫助:) –

我認爲你需要做的是相反的順序，因爲不再是正確的節點刪除節點指數點時，後來由於整個名單已經減少。另外，剛剛查詢li元素直接

window.emptyList = function() { 
 
    var li = document.querySelectorAll('.list > li'); 
 
    var listLength = li.length; 
 
    
 
    for (var i = listLength-1; i >=0 ; i--) { 
 
    li[i].parentNode.removeChild(li[i]); 
 
    } 
 
    
 
    // this works 
 
    // ul.innerHTML = ""; 
 

 
}

<ul class="list"> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
</ul> 
 

 
<a class="btn" onclick="emptyList()">clear list</a>

來源

2017-03-17 08:56:50 bjanes

感謝您的回答。這是一個非常有用的替代方法。 –

請嘗試下面的代碼。您正在使用removeChild錯誤的方式。

window.emptyList = function() { 
     var ul = document.querySelector('.list'); 
     var listLength = ul.children.length; 

     for (i = 0; i < listLength; i++) { 
     ul.removeChild(ul.childNodes[i]); 
     } 
    }

來源

2017-03-17 09:00:04

window.emptyList = function() { 
    var ul = document.querySelector('.list'); 
    var listLength = ul.children.length; 

    while (ul.children.length !=0){ 
    ul.removeChild(ul.childNodes[0]); 
    } 

    // this works 
    // ul.innerHTML = ""; 

}

一旦你刪除第一個list的長度被改變。

來源

2017-03-17 09:06:58 user2648008

從UL中刪除for循環（JS）

回答

相關問題