I'm trying to remove <select>....</select> html element with all of it's it's values (option) on click event. like Want to output like this: I'm using code like: Above code working fine but unable to remove value inside <option>opt ..</option> Can anyone help me please. Answer Remove the <select> elements with .remove().

Remove HTML Elements with values using javascript

I’m trying to remove <select>….</select> html element with all of it’s it’s values (option) on click event. like

<span>Span First</span>
<select>
<option>opt 01</option>
<option>opt 02</option>
</select>
<span>Span Second</span>
<select>
<option>opt 11</option>
<option>opt 12</option>
</select>

Want to output like this:

Span First Span Second

I’m using code like:

<script>
function removeTags(str)
{
if ((str===null) || (str===''))
return false;
else
str = str.toString();
return str.replace( /(<([^>]+)>)/ig, '');
}
document.write(removeTags('<html> Tutorix is <script> the best <body> e-learning platform'));;
</script>

Above code working fine but unable to remove value inside <option>opt ..</option>

Can anyone help me please.

Answer

Remove the <select> elements with .remove().

document.querySelectorAll("select").forEach(el => el.remove());

<span>Span First</span>
<select>
<option>opt 01</option>
<option>opt 02</option>
</select>
<span>Span Second</span>
<select>
<option>opt 11</option>
<option>opt 12</option>
</select>

Advertisement

Answer