JSFiddle - React, Tailwind, and code Playground

HTML

<div id="article">
  <div id="inset">
    <ul>
      <li>This is bullet point #1.</li>
      <li>This is bullet point #2.</li>
      <li>This is bullet point #3.</li>
    </ul>
  </div>
  <p>This is the first paragraph of the article</p>
  <p>This is the second paragraph of the article</p>
  <p>This is the third paragraph of the article</p>
</div>

<div id="article2">
  <div id="inset2">
    <ul>
      <li>This is bullet point #1.</li>
      <li>This is bullet point #2.</li>
      <li>This is bullet point #3.</li>
    </ul>
  </div>
  <p>This is the first paragraph of the article</p>
  <p>This is the second paragraph of the article</p>
  <p>This is the third paragraph of the article</p>
</div>

<a href="#remove">remove</a>

<div id="result">&nbsp;</div>

CSS

#result {
    margin: 5px;
    padding: 10px;

    text-shadow: 0 1px 0 #fff;
    
    background: #ddd;
    
    border: 2px solid #cacaca;
    
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
}

JavaScript

$('a').click(function(o){
    $('#article, #article2').find(">*").not('#inset, #inset2').remove().each(function(){
       $('#result').html( $('#result').html() + '<br />' + $(this).text() )
    })
    o.preventDefault()
})