Remove HTML Elements with values using javascript

Question

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.

You haven't shown more context for your HTML, such as the parent element. Why? — Marc
– Marc, Commented Nov 15, 2020 at 18:38

Marc · Accepted Answer · 2020-11-15 18:42:21Z

1

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>

answered Nov 15, 2020 at 18:42

Marc

11.6k2 gold badges40 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ravinder Godara Over a year ago

Thanks Marc, I have one more question, I have html code in my textbox1. on button click i want to parse html code from textbox1 and want to show output (Span First Span Second) in textbox2.

Marc Over a year ago

You are asking a brand new and completely separate question. Your original question has nothing about textboxes. You can consider using innerHTML javascript keyword to solve your problem. But if you can't figure it out, I suggest creating a new question.

mathu mitha · Accepted Answer · 2020-11-15 18:47:31Z

0

You can try DOM's removeChild() method to remove the elements. You can also use latest remove() method.

Array
 .from(parentNode.querySelectorAll('sele 
 ct').forEach((elem) => {
       parentNode.removeChild[elem]
  })

answered Nov 15, 2020 at 18:47

mathu mitha

5974 silver badges6 bronze badges

Collectives™ on Stack Overflow

Remove HTML Elements with values using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related