JSFiddle - React, Tailwind, and code Playground

by Johnathan Spell

HTML

<button id="showAlerts">Show Alerts</button>
<div class="keepMe"> keep this div </div>

<div>
    <ul>
        <li>Item 1</li>
        <li>item 2</li>
        <li>
            <div style="position:absolute; top:100px; right: 100px; height:50px; width: 50px; background-color: aqua;"> </div>
        </li>
    </ul>
</div>

<div class="keepMe"> keep this div as well </div>

JavaScript

var containerMarkup = $('body').html();
var containerCopy = $('body').clone();
var removeThis = containerCopy.find('.keepMe, #showAlerts').remove().end().html();
var changed = containerMarkup.replace("/"+removeThis+"/gm", "<div>Replaced</div>");

$("#showAlerts").click( function() {
    alert("Full markup below:\r\n\r\n"+containerMarkup);
    alert("Markup to be replaced:\r\n\r\n"+removeThis);
    alert("Final markup:\r\n\r\n"+changed);
});