Removing every child element EXCEPT first child?

Question

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.

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.

Answer 1

To remove all but the first child:

while (cntnt.childNodes.length > 1) {
    cntnt.removeChild(cntnt.lastChild);
}

You could also filter by the id of the select you want to save

while (cntnt.lastChild.id !== 'pSort') {
    cntnt.removeChild(cntnt.lastChild);
}

Or your could just get the innerHTML of pSort and append it with the ajax response right away, without having to loop to remove elements

cntnt.innerHTML = document.getElementById('pSort').innerHTML + return_data;

Answer 2

You can do it this way:

const firstElementChild = yearRangeToSelector.firstElementChild;
    selectElement.innerHTML = '';
    selectElement.append(firstElementChild);