如何根据父节点的子节点删除父节点和/或css样式

Question

我有一个父节点，它需要‘padding:15px’css样式。一些子元素被从视图中过滤掉，这会导致父节点保留在DOM中，并带有一个看起来很奇怪的‘padding:15px’css样式--这会导致其他文本被下推到页面上。

当所有的子元素都是'display:hidden‘时，我怎么才能完全删除父节点，或者只删除css填充呢？

我曾尝试使用Javascript --请不要使用jQuery --当子元素包含特定类时删除parents节点。如果存在此类，请删除父节点。问题是，如果有多个子元素，只要代码遇到一个标记了某个类的子元素，它就会删除父元素。我只想在所有子元素都是'display:hidden‘的情况下移除/填充移除父元素。

我确实考虑过编写一些Javascript来根据子节点向父节点添加类，然后检查父类，如果它们包含一个“活动”类，表明视图中有一个子元素，则父节点不会被删除。但是，我目前的Javascript技能是有限的，所以我不知道从哪里开始。

下面的代码是我用来帮助解释我的情况的。但为了澄清，我使用了带有for循环的Vue.js。for循环循环遍历数据并动态确定要分配的类-已过滤/未过滤。

实际代码片段：

<div
        v-for="(originalText, lineIndex) in originalTexts"
        :key="lineIndex"
        :class="{ paragraph : true }"
      >
        <span
          v-for="(text, sentIndex) in originalText"
          :key="sentIndex"
          class="originalText"
          :class="[dataView === 'Flagged' && text.f ? '' : 
          dataView === 'Completed' && text.c ? '' :
          dataView === 'In-progress' && text.v && !text.c ? '' :
          dataView === 'Not started' && !text.v ? '' : 
          dataView === 'All' ? '' : 'filteredText']"
        >

帮助我解释的小提琴代码：

<div>
  <div class="paragraph">
    <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">
    <span class="filteredText">This is the second filtered text.</span>
  </div>
   <div class="paragraph">
    <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>

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);
  }
}

.paragraph {
  padding-bottom: 15px;
}

JS小提琴：https://jsfiddle.net/h93qtxo6/18/

我希望仅当所有子元素都包含特定的类/css样式“display:none”时才删除父节点和/或填充。最好我只想删除样式，但从我所读到的内容来看，这并不容易实现。

Answer 1

要执行所需操作，必须从父级中删除该类，并从父级中使用removeChild函数。

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

      if(parent.classList.contains('nonFilteredTextChild')){
        parent.classList.remove('paragraph');
        parent.classList.remove('filteredTextChild');
        parent.removeChild(elements[0]);    
      } else {
        parent.remove(parent);
      }
   };
}

JS小提琴：https://jsfiddle.net/v9Lwhqrz/