A simple jQuery function that removes empty or tags containing just ‘ ‘

I’ve made a simple function, this time in jQuery rather than JS, that just removes empty <p></p>, span and strong tags. I’m curious to see what everyone thinks about my solution as I’m relatively new to jQuery, and whether it could be improved. My original solution is as follows:

$  ('p').filter(function() {  return ($  (this).html().trim() == '&nbsp;'); }).remove(); $  ('span').filter(function() {  return ($  (this).html().trim() == '&nbsp;'); }).remove(); $  ('span').filter(function() {  return ($  (this).html().trim() == ''); }).remove(); $  ('strong').filter(function() {  return ($  (this).html().trim() == ''); }).remove(); $  ('p').filter(function() {  return ($  (this).html().trim() == ''); }).remove(); 

This isn’t exactly dry… So I made a couple of other solutions:

/* MY DRIER SOLUTION 1 */ $  .fn.jCleaner = function() {     return $  (this).filter(function() {         return ($  (this).text().trim() === '&nbsp;' || $  (this).text().trim() === '');         }).remove(); } $  ('p, span, strong').jCleaner();  /* MY DRIER SOLUTION 2 */ function jCleaner() {     return $  (this).filter(function() {         return ($  (this).text().trim() == '&nbsp;' || $  (this).text().trim() === '');         }).remove(); } $  ('p, span, strong').each(jCleaner); 

And the original HTML is:

/* ORIGINAL HTML */ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='test'>     <p>text</p>     <p>&nbsp;</p>     <p>text</p>     <p><span>text</span></p>     <p><span></span></p>     <p>text</p>     <p><strong>text</strong></p>     <p></p>     <p>&nbsp;</p>     <p>text</p>     <p><span><strong>&nbsp;</strong></span></p>     <p><span><strong>text</strong></span></p>     <p>&nbsp;</p>     <p><span>text</span></p>     <p></p>     <p><span></span></p>     <p><span>&nbsp;</span></p>     <p><span><strong></strong></span></p>     <p>text</p> </div> 

So my questions are essentially how can my solutions be improved (if at all)? I had to write an entire function and then call it on each element. Thanks for any advice here.

Note: here’s the solution in JS:

document.querySelectorAll("span, p, strong")     .forEach(el => el.textContent.trim() === "" && el.parentNode.removeChild(el)) 

A simple function that removes empty or tags containing just ‘ ‘

I’ve written a function that should get rid of empty p, span, etc tags and those with just ‘ ‘ and am looking for ways to improve it. My original solution was very ‘wet’, but I’ve managed to come up with a drier solution.

The Original HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='test'>     <p>text</p>     <p>&nbsp;</p>     <p>text</p>     <p><span>text</span></p>     <p><span></span></p>     <p>text</p>     <p><strong>text</strong></p>     <p></p>     <p>&nbsp;</p>     <p>text</p>     <p><span><strong>&nbsp;</strong></span></p>     <p><span><strong>text</strong></span></p>     <p>&nbsp;</p>     <p><span>text</span></p>     <p></p>     <p><span></span></p>     <p><span>&nbsp;</span></p>     <p><span><strong></strong></span></p>     <p>text</p> </div> 

My Original Solution:

/*     How to make this drier?     ORIGINAL UNCLEAN SOLUTION */     var ps = document.getElementsByTagName('p'),     spans = document.getElementsByTagName('span'),     strongs = document.getElementsByTagName('strong');      for (let el of ps) {         if (el.innerHTML == '&nbsp;') { // can't also include if '' at this stage             el.parentNode.removeChild(el);         }     }     for (let el of spans) {         if (el.innerHTML == '&nbsp;' || el.innerHTML == '') {             el.parentNode.removeChild(el);         }     }     for (let el of strongs) {         if (el.innerHTML == '&nbsp;' || el.innerHTML == '') {             el.parentNode.removeChild(el);         }     }     for (let el of ps) {         if (el.innerHTML == '') {             el.parentNode.removeChild(el);         }     } 

My ‘drier’ solution:

/*     MY CLEANER SOLUTION */     var ps = document.getElementsByTagName('p'),     spans = document.getElementsByTagName('span'),     strongs = document.getElementsByTagName('strong');      for (let el of ps) {         cleaner(el);     }     for (let el of spans) {         cleaner(el);     }     for (let el of strongs) {         cleaner(el);     }      function cleaner(el) {         if (el.innerHTML == '&nbsp;' || el.innerHTML == '') {             el.parentNode.removeChild(el);         }     } 

Would someone mind quickly running over both solutions and verifying that my 2nd solution is best? Also, I wonder whether that could be improved, or whether anyone has any better ideas for a solution? Thanks for the help here – for brevity, I’m looking at writing concise but also clear code.