How to clear HTML data list current options?

Question

I am writing an dynamic data list. However, when I tried to update the list, the previous didn't clear. Are there any solutions?

Here is my code

 function loadDataList(selectedSchoolName)
    {
        var options = '';
        //document.getElementById('schoolNameList').remove();
        for(var i = 0; i < selectedSchoolName.length; i++)
        {
            options += '<option value="'+ selectedSchoolName[i] +'" >';
        }
        document.getElementById('schoolNameList').innerHTML = options;
    }

Thank You

Solution 1

In this instance, you don't want to remove schoolNameList itself; you want to remove the children of that list (the list items). There are a few ways to do this, but this one should work:

document.getElementById('schoolNameList').innerHTML = '';

Solution 2

I like this one. Seems the cleanest I could find, but it is jQuery not vanilla JS DOM.

$('#schoolNameList').empty();