JSFiddle - React, Tailwind, and code Playground

HTML

<select size='12' name='UniList' id='UniList' style='width:180px;'>
    <option value=''>1</option>
    <option value=''>2</option>
    <option value=''>3</option>
    <option value=''>4</option>
</select>
<br>
<button onclick="doDelete();">Original Delete</button>
<br>
<button onclick="doDeleteNew();">New Delete</button>
<br>
<button onclick="doDeleteBest();">Best Delete</button>

JavaScript

function DeleteAll(string) {

       var i;
       var list = DID(string);

       alert(DID(string).options.length);

       for (i = 0; i<list.options.length; i++) {
           list[i] = null;
       }
       alert(list.options.length);
       alert("finished deleting");
}

function NewDeleteAll(string) {

       var i;
       var list = DID(string);

       alert(DID(string).options.length);

       for (i = list.options.length-1; i>=0; i--) {
           list[i] = null;
       }
       alert(list.options.length);
       alert("finished deleting");
}

function BestDeleteAll(string) {

       var list = DID(string);
       alert(DID(string).options.length);

        list.options.length=0;
       alert(list.options.length);
       alert("finished deleting");
}

function doDelete()
{
    DeleteAll('UniList');
}

function doDeleteNew()
{
    NewDeleteAll('UniList');
}

function doDeleteBest()
{
    BestDeleteAll('UniList');
}


function DID(id)
{
 return document.getElementById(id);
}