Is it possible to delete a certain type of child element?

Question

I am trying to make a simple website that has to do with surveys (like making surveys, posting them, answering them, seeing responses, etc), but I have a problem that would take a lot of code to solve, and involve hardcoding. I am trying to delete all the br child elements from a div parent element in one shot, so like one line of code or two lines max.

As you can see, there are a lot of br tags in that parent div. I want a single line or double line of code that can delete all those br tags in one shot. So in the end it should look like this:

Thank you!

Answer 1

You'll need to iterate your parent node's children, then you can use element.parentNode.removeChild(element) when a condition applies:

const parentElement = document.getElementById('parent');
[...parentElement.children].forEach((element) => {
  if (element.tagName === 'BR') {
    element.parentNode.removeChild(element);
  }
});

<div id="parent">
  <div>foo</div>
  <br>
  <br>
  <br>
  <span>bar</span>
  <br>
  <br>
  <br>
  <div>baz</div>
</div>

Note that you can't iterate the HTML property children (similarly to classList). The trick to do that is to simply spread it (i.e. [...foo])