JSFiddle - React, Tailwind, and code Playground

by itsazzad

HTML

<div class="blue">
    <div class="green">
        <div class="red">
            <button>wrap/unwrap</button>
<div class="blue">
    <div class="green">
        <div class="red">
            <p>Hello</p>
            <p>cruel</p>
            <p>World</p>
        </div>
    </div>
</div>
            <p>Hello</p>
            <p>cruel</p>
            <p>World</p>
        </div>
    </div>
</div>

CSS

div {
    border: 2px solid grey;
  }
  p {
    background: yellow;
    margin: 4px;
  }
.red{
    border: 1px solid red;
}
.green{
    border: 1px solid red;
}
.blue{
    border: 1px solid red;
}

JavaScript

var pTags = $( "p" );
$( "button" ).click(function() {
  if ( pTags.parent().is( "div" ) ) {
      console.log("unwrap");
    pTags.unwrap();
  } else {
    pTags.wrap( "<div></div>" );
  }
});