En el siguiente código, cuando realizo un change de evento en una etiqueta <select> , intento reemplazar las opciones dentro de cuando esto cambia a un valor diferente, la pregunta es: ¿Cómo puedo eliminar la etiqueta de opción de tienda anterior en la etiqueta <select> cuando estoy almacenando una nueva etiqueta <option> ?

Vea esta imagen para entender el problema.

 const massArray = ["tonne", "Kilogram", "Gram", "Milligram", "Microgram","Imperial ton", "US ton", "Stone", "Pound", "Ounce"] const areaArray = ["Square kilometer", "Square meter", "Square mile", "Square yard", "Square foot", "Square inch", "Hectare"] var mainSelect = document.getElementById('mainSelect'); mainSelect.addEventListener("change", () => { if (mainSelect.value == "Area") { for (let i = 0; i < areaArray.length; i++) { const para = document.createElement("option"); const node = document.createTextNode(areaArray[i]); para.appendChild(node); const element = document.getElementById("ssSucf"); element.appendChild(para); const para2 = document.createElement("option"); const node2 = document.createTextNode(areaArray[i]); para2.appendChild(node2); const secondSelectBox = document.getElementById("secondSelectBox"); secondSelectBox.appendChild(para2); } }else if (mainSelect.value == "Mass") { for (let i = 0; i < massArray.length; i++) { const para = document.createElement("option"); const node = document.createTextNode(massArray[i]); para.appendChild(node); const element = document.getElementById("ssSucf"); element.appendChild(para); const para2 = document.createElement("option"); const node2 = document.createTextNode(massArray[i]); para2.appendChild(node2); const secondSelectBox = document.getElementById("secondSelectBox"); secondSelectBox.appendChild(para2); } } })