How can I remove these specific tags “<div><p>&nbsp;</p></div>” found in my article using CSS if not using jQuery

Question

<div><p>&nbsp;</p></div> - These tags has been added to my code because of a wysiwyg editor that I can't tweak or change. How can I remove it ideally using CSS or if not jQuery as it messes my layout.

Here is the structure generated by the wysiwyg and I need to clean it up. I can't change the wysiwyg editor because there are already lots of articles written using that editor. Only solution I can think of right now is purely frontend. By the way the platform is Rails

Thanks!

Answer 1

In your HTML <div class="tempDiv" style="display:none"></div>

And then some jQuery:

var crappyString = "<div><p>&nbsp;</p></div>";
$(".tempDiv").html(crappyString);
var sanitisedString = $(".tempDiv").text();

---

Related to an issue I've encoutered in the past: When jQuery parsing html - Chrome throwing net::ERR_FILE_NOT_FOUND

---

can't tweak or change

Sometimes it helps when you can talk to other devs: TinyMCE- Get plain text

Answer 2

For SEO is better to get out wysiwyg and take by hand every article and clean it. I get same situation in Joomla, and I do same. Is hard to make a good css/js selector to clear just div, div > p, div + br with no text. The default wordpress editor make text more clean, try to see if is free on the market and add it on your app.