javascript 删除除第一个子元素之外的每个子元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19885788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing every child element EXCEPT first child?
提问by Azrael
function sortPosts() {
var pSort = document.getElementById('pSort').selectedIndex;
var pstSort = document.getElementById('pSort').options;
var sorted = pstSort[pSort].value;
var hr = new XMLHttpRequest();
var url = "...";
var vars = "sort="+sorted;
hr.open("POST", url, true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if (hr.readyState === 4 && hr.status === 200) {
var return_data = hr.responseText;
var cntnt = document.getElementById('content');
while ((cntnt.lastChild !== '
<select id="pSort">
<option value="all" selected="true">All Posts</option>
<option value="friends">Friends\' Posts</option>
<option value="following">Following\'s Posts</option></select>' && cntnt.childNodes.length !== 1) || (cntnt.firstChild != '<select id="pSort"><option value="all" selected="true">All Posts</option><option value="friends">Friends\' Posts</option><option value="following">Following\'s Posts</option></select>' && cntnt.childNodes.length != 1)) {
cntnt.removeChild(cntnt.lastChild);
}
document.getElementById('content').innerHTML += return_data;
document.getElementById('content').style.opacity = '1.0';
}
}
hr.send(vars);
document.getElementById('content').style.opacity = "0.5";
}
}
I need to remove every child element in the div#content element until only the select element remains. I would say every child element except the first, but it seems there's an invisible text node in Chrome within the div#content element that I have no control over.
我需要删除 div#content 元素中的每个子元素，直到只剩下 select 元素。我会说除第一个之外的每个子元素，但似乎 Chrome 中的 div#content 元素中有一个我无法控制的不可见文本节点。
Or if you have a better way to keep the select element on the page while ajax loads new content and removes the old content, I'd love to hear it.
或者，如果您有更好的方法在 ajax 加载新内容并删除旧内容时将 select 元素保留在页面上，我很想听听。
回答by kavun
To remove all but the first child:
要删除除第一个子项之外的所有项：
while (cntnt.childNodes.length > 1) {
cntnt.removeChild(cntnt.lastChild);
}
You could also filter by the idof the selectyou want to save
您也可以通过过滤器id的select要保存
while (cntnt.lastChild.id !== 'pSort') {
cntnt.removeChild(cntnt.lastChild);
}
Or your could just get the innerHTMLof pSortand append it with the ajax response right away, without having to loop to remove elements
或者您可以立即获取innerHTMLofpSort并将其附加到 ajax 响应中，而无需循环删除元素
cntnt.innerHTML = document.getElementById('pSort').innerHTML + return_data;
回答by Kabelo Tooka
You can do it this way:
你可以这样做：
const firstElementChild = yearRangeToSelector.firstElementChild;
selectElement.innerHTML = '';
selectElement.append(firstElementChild);
