Javascript remove a specfic child from a parent

Question

I have a div with various different elements within it:

<div id="Dropdown">
  <label class="podcastLabel" for="touch">
<span>titre</span>
</label>
  <br>
  <p></p>
  <ul class="podcastSlide">
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
    <li><a href="#">Lorem Ipsum</a></li>
  </ul>
</div>

The CMS system we use likes to inject blank tags so I need to remove the <p> tag in the div above.

I have tried:

var fDiv = document.getElementById("Dropdown");
fDiv.removeChild(fDiv.childNodes[3]); 

But I cant seem to remove that <p> tag.

Answer 1

You could use querySelectorAll to get all descendant p tag elements of your div, iterate the collection and remove each one like so (Long Version) :

 window.addEventListener("DOMContentLoaded", () => { const mydiv = document.getElementById("Dropdown"); let ps = mydiv.querySelectorAll('p'); console.log(ps.length); for(let a = ps.length - 1; a >= 0; a--){ ps[a].remove(); } ps = mydiv.querySelectorAll('p'); console.log(ps.length); });

 <div id="Dropdown"> <label class="podcastLabel" for="touch"> <span>titre</span> </label> <br> <p></p> <ul class="podcastSlide"> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul> </div>

You could potentially do this all in one line of code like so (Short Version) :

 window.addEventListener("DOMContentLoaded", () => { console.log(document.querySelectorAll('#Dropdown p').length); document.querySelectorAll('#Dropdown p').forEach((a) => a.remove()); console.log(document.querySelectorAll('#Dropdown p').length); });

 <div id="Dropdown"> <label class="podcastLabel" for="touch"> <span>titre</span> </label> <br> <p></p> <ul class="podcastSlide"> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul> <p></p> <p></p> </div>

Answer 2

Your <p> is the third child in the dropdown, so you should use index 2 instead of 3.

ie fDiv.removeChild(fDiv.childNodes[2]);

Answer 3

Find the paragraph with querySelector , and thenremove it .

(I used a timer in this example for visual effect.)

 // Find the paragraph that is a child of // the Dropdown element, then remove it const p = document.querySelector('#Dropdown p'); setTimeout(() => p.remove(), 2000);

 <div id="Dropdown"> <label class="podcastLabel" for="touch"> <span>titre</span> </label> <br> <p>Removed in two seconds</p> <ul class="podcastSlide"> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul> </div>

Answer 4

You could select "empty" paragraphs which would be a great way of avoiding grabbing any elements that are intentional paragraphs. By also using query selector all, you can grab all empty paragraphs regardless of where they are located in the structure.

 const myContainer = document.getElementById('Dropdown'); const emptyParas = myContainer.querySelectorAll('p:empty'); console.log(emptyParas); emptyParas.forEach(el => el.remove());

 <div id="Dropdown"> <label class="podcastLabel" for="touch"> <span>titre</span> </label> <br> <p></p> <p>Not empty<p> <p></p> <ul class="podcastSlide"> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> <li><a href="#">Lorem Ipsum</a></li> </ul> </div>