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){
  	var parent = elements[0].parentNode;
    console.log(elements[0]);
    if(parent.classList.contains('nonFilteredTextChild')){
      parent.classList.remove('paragraph');
      parent.classList.remove('filteredTextChild');
      parent.removeChild(elements[0]);	
    } else {
    	parent.remove(parent);
    }
  };
  }