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() == ' ');
}).remove();
$('span').filter(function() {
return ($(this).html().trim() == ' ');
}).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() === ' ' || $(this).text().trim() === '');
}).remove();
}
$('p, span, strong').jCleaner();
/* MY DRIER SOLUTION 2 */
function jCleaner() {
return $(this).filter(function() {
return ($(this).text().trim() == ' ' || $(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> </p>
<p>text</p>
<p><span>text</span></p>
<p><span></span></p>
<p>text</p>
<p><strong>text</strong></p>
<p></p>
<p> </p>
<p>text</p>
<p><span><strong> </strong></span></p>
<p><span><strong>text</strong></span></p>
<p> </p>
<p><span>text</span></p>
<p></p>
<p><span></span></p>
<p><span> </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))