JSFiddle - React, Tailwind, and code Playground

by chille1987

HTML

<div class="group">1</div>
<div class="group">2</div>
<p><br/></p>
<div class="group">3</div>

<p>Lorem ipsum dolor sit amet</p>

<div class="group">4</div>
<div class="group">5</div>

<p>Lorem ipsum dolor sit amet</p>

<div class="group">6</div>

CSS

.wrapper{border:1px solid green;}

Babel + JSX

let wrapper = document.createElement('div');
wrapper.classList.add('wrapper');

let brTags = document.querySelectorAll('br:first-child');
brTags.forEach(empty => {
	empty.parentNode.classList.add('empty-paragraph');
});

const empty = document.querySelectorAll('.empty-paragraph');
empty.forEach(paragraph => {
	if (paragraph.nextElementSibling.classList.contains('group') && paragraph.previousElementSibling.classList.contains('group')) {
    	paragraph.remove();
    }
});