pstein 1 Posted February 18 Report Share Posted February 18 How can I (after loading of webpage) remove with JavaScript/jQuery ALL <P> elements which contain whitespaces only? The code should match for example the following elements: <P><br></P> <P><br><br></P> <P><br class="foobar"> </P> Quote Link to post Share on other sites
Ingolme 1,032 Posted February 18 Report Share Posted February 18 First, get all <p> elements. var elements = document.getElementsByTagName("p"); Then, loop through all of them. This has to be done in reverse order because deleting items reindexes the elements node list we obtained. (If you want to learn more about this I can explain it in more detail) var element; for(var i = elements.length-1; i >= 0; i--) { element = elements[i]; ... For each element in the loop, check its contents. This is the complicated part. You have to remove all <br> elements and whitespace from the element's innerHTML and check whether the result is empty. If it was just normal whitespace, the trim() method would be enough, but you wanted to check for <br> and so we need a regular expression. var contents = element.innerHTML; contents = contents.replace(/(<br[^>]>| |\s|\n|\r|\t)+/gi, ""); if(contents.length === 0) { element.parentNode.removeChild(element); } Quote Link to post Share on other sites
dsonesuk 921 Posted February 18 Report Share Posted February 18 (edited) Can't you just search for any text(), no text remove(), doesn't matter if any elements exist $(document).ready(function(){ $("p").each(function(){ if($(this).text().trim() ==""){ $(this).remove(); } }); }); Yep! it works. Edited February 18 by dsonesuk Quote Link to post Share on other sites
Ingolme 1,032 Posted February 19 Report Share Posted February 19 It's not entirely clear what the requirements are. If there were decorative items like <hr> or <img> you might not want to remove them. Quote Link to post Share on other sites
dsonesuk 921 Posted February 19 Report Share Posted February 19 Requirements are, if you missed them 23 hours ago, pstein said: How can I (after loading of webpage) remove with JavaScript/jQuery ALL <P> elements which contain whitespaces only? The code should match for example the following elements: <P><br></P> <P><br><br></P> <P><br class="foobar"> </P> If you want to change goal posts to not include those elements, i can easily check by using .has() to not include them. Quote Link to post Share on other sites
pstein 1 Posted February 20 Author Report Share Posted February 20 On 2/18/2021 at 9:54 PM, dsonesuk said: Can't you just search for any text(), no text remove(), doesn't matter if any elements exist $(document).ready(function(){ $("p").each(function(){ if($(this).text().trim() ==""){ $(this).remove(); } }); }); Thank you for the suggestion. The problem is here that <P> could contain (only) <img> elements. And <img> are not text elements. So <p> <img src=".......>...</img> </p> would be deleted with your javascript. Thats not intended Quote Link to post Share on other sites
dsonesuk 921 Posted February 20 Report Share Posted February 20 https://www.w3schools.com/code/tryit.asp?filename=GNU4PJEGMKOZ 1 Quote Link to post Share on other sites
dsonesuk 921 Posted February 21 Report Share Posted February 21 https://www.w3schools.com/code/tryit.asp?filename=GNVVBS9H7SVT 1 Quote Link to post Share on other sites
pstein 1 Posted February 24 Author Report Share Posted February 24 Looks good. Thank you Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.