JSFiddle - React, Tailwind, and code Playground
by southerd
HTML
<div id="t1"><div id="JEFRi">
<div id="_default_theme">
<div id="_default_entity">
<div id="_default_property">
<span id="view">prop_view</span>
<span id="list">prop_list</span>
<span id="edit">prop_edit</span>
<span id="bulk_edit">prop_bulk_edit</span>
</div>
<div id="_views">
<span id="view">_views_view</span>
<span id="list">_views_list</span>
<span id="edit">_views_edit</span>
<span id="bulk_edit">_views_bulk_edit</span>
</div>
</div>
<div id="_page">_default_page_entity</div>
</div>
</div>
</div>
<div id="t2"><div id="JEFRi">
<div id="_default_theme">
<div id="_default_entity">
<div id="_default_property">
<span id="view">prop_view</span>
<span id="list">prop_list</span>
<span id="edit">prop_edit</span>
<span id="bulk_edit">prop_bulk_edit</span>
</div>
<div id="_views">
<span id="view">_views_view</span>
<span id="list">_views_list</span>
<span id="edit">_views_edit</span>
<span id="bulk_edit">_views_bulk_edit</span>
</div>
</div>
<div id="_page">_default_page_entity</div>
</div>
</div>
</div>
<div id="t"></div>
JavaScript
/*
$.fn.merge = (doms) ->
doms.each (dom) ->
child = this.children("#" + dom.attr("id"))
if child.length is 0
this.append(dom.remove())
else
child.merge(dom.children())
# dom.children removed, replace kids
this.children(":not([id])").remove()
this.append(dom.children().remove())
this
*/
$.fn.merge = function(doms){
doms.each(function (dom){
var child = this.children("#" + dom.attr("id"))
if child.length is 0
this.append(dom.remove())
else {
child.merge(dom.children())
# dom.children removed, replace kids
this.children(":not([id])").remove()
this.append(dom.children().remove())
}
return this;
}
$("#t").merge($("#t1")).css("color", "red")