What is the preferred method to remove an empty tag from the content of a rich text element?

Example result:

  Lorem<a href="…"></a> ipsum

When editing text in the WYSIWYG editor (Redactor) the result can contain empty anchor tags. This is a problem when navigating the page with the tab key, for instance, because the user can not see the focus anymore.

How can I automatically remove those artefacts?

  • one way is to allow HTML in the redactor config and check it over for these things, but that's not great or automatic. You could do something like *:empty{display:none} in the css but that's not great either (as a workmate of mine said, that's just sweeping the turd under the rug) Jan 13, 2017 at 15:56

2 Answers 2


I ended up using this solution:

Filter empty tags in Craft/Twig template

{{ entry.houseDescription|replace('/<[^\\/>][^>]*><\\/[^>]+>/', '')|raw }}
  1. The replace filter /<[^\\/>][^>]*><\\/[^>]+>/ searches for empty tags and removes them.
  2. The raw filter stops Twig from escaping HTML tags.

Regular expression test (RegExr)


I don't think you can - by hand is the only way I've found!

  • Thx, your are right. I posted my "by hand" solution as answer.
    – Mario
    Jan 18, 2017 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.