JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="paragraph filteredTextChild nonFilteredTextChild">
    <span class="filteredText">This is the first filtered text.</span>
    <br />
    <span>This is the first unfiltered text and I expect it to be displayed on screen.</span>
  </div>
  <div class="paragraph filteredTextChild">
    <span class="filteredText">This is the second filtered text.</span>
  </div>
   <div class="paragraph nonFilteredTextChild">
    <span>This is the second unfiltered text and I expect it to be displayed on screen.</span>
  </div>
  <button onclick="filterText()">
    Filter text
  </button>
</div>

CSS

.paragraph {
  padding-bottom: 15px;
}

JavaScript

function filterText() {
	var elements = document.getElementsByClassName('filteredText');
  while(elements.length > 0){
    console.log(elements[0].parentNode)
    console.log(elements[0])
    elements[0].parentNode.remove(elements[0].parentNode);
  }
}