JSFiddle - React, Tailwind, and code Playground

by garreh

HTML

<h2>Other Events</h2>                       
<p>
<strong>Venue name</strong>
</p>
<button>Turn into &lt;p&gt;!</button>
<div class="details">
<p>
Wednesday, May 11, 2011 <br>
Wednesday, June 08, 2011 <br>
Wednesday, July 13, 2011 <br>
Wednesday, August 10, 2011 <br>
Wednesday, September 14, 2011 <br>
Wednesday, October 12, 2011 <br>
Wednesday, November 09, 2011 <br>
19.00
<br>
</p>
</div>

CSS

.details p p {
    border-left: 4px solid blue;
}

JavaScript

$('button').click(function() {
    
    var $p = $('.details p');
    $p.contents()
      .filter(function() {
        return this.nodeType == 3;
     })
     .wrap('<p>')
        
     $('br', $p).remove();
    
});