JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<li class="foo">
    <div>
        <ul>
            <li class="bar">
                <div>
                    <a href="#">Link</a>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="foo">
    <div>
        <ul>
            <li class="bar">
                <div>
                    <a href="#">Link</a>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="foo">
    <div>
        <ul>
            <li class="bar">
                <div>
                    <a href="#">Link</a>
                </div>
            </li>
        </ul>
    </div>
</li>
</div>
<div id="Output">
  <strong>Output</strong>
  <pre></pre>
</div>

CSS

#Output {
  border: 1px solid black;
  background: #eee;
  margin-top: 0.5em;
  padding: 0.5em;
}

JavaScript

$.fn.unwrapN = function(n) {
  while(n--) $(this).unwrap();
  return $(this);
}

$('.foo  a').unwrapN(4);


$('pre').html(
  $('#container')
    .html()
    .replace(/</g,'&lt;')
    .replace(/(  )+/g, '  ')
    .replace(/[\n\r] *[\n\r]/g,'')
);