JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<div id="detachableDiv">
    <a href="#" id="a1">click me</a><br />
    <input type="text" id="input1" />
    <input type="text" id="input2" />
    <button id="but1">Click</button>
</div>

<button id="but2">Click to detach all the childs of detachableDiv</button>

CSS

#a1.extra{
    color:green;
}
#input1.extra{
    outline:1px solid cyan;
}
#input2.extra{
    outline:1px solid green;
}
#but1{
    width:40px;
}
#but1.extra{
    width:80px;
}

JavaScript

var x;
$("#a1").click(function(){
    $(this).toggleClass("extra");
});
$("#input1").click(function(){
    $(this).toggleClass("extra");
});
$("#input2").click(function(){
    $(this).toggleClass("extra");
});
$("#but1").click(function(){
    $(this).toggleClass("extra");
});
$("#but2").click(function(){
    if($("#detachableDiv").children().length > 0){
        x = $("#detachableDiv").children().detach();
        console.log(x);
        $(this).text("Click to attach them again");
    } else {
        $("#detachableDiv").html(x);
        $(this).text("Click to detach all the childs of detachableDiv");
    }
});