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

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

当所有子元素都是“display:hidden”时，如何完全删除父节点，或者仅删除css填充

当子元素包含特定类时，我尝试使用Javascript（请不要使用jQuery）删除父节点。如果存在此类，请删除父节点。问题是，如果有多个子元素，只要代码遇到一个子元素并用某个类标记，它就会删除父元素。我只希望在所有子元素都是“显示：隐藏”时删除父元素/删除填充

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

下面的代码是我用来解释我的情况的代码。但为了澄清，我将Vue.js与for循环一起使用。for循环循环遍历数据并动态确定要分配的类-filtered/notfiltered

实际代码片段：

<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']"
        >

。段落{
垫底：15px；
}

JS小提琴：

---

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

要做你想做的事情，你必须从父类中删除类，并从父类中使用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 Fiddle:

我看到您已将“filteredTextChild”和“NoFilteredTextChild”添加到父节点，但遗憾的是，除非有某种动态方式，否则我无法这样做。我使用了您在JSFIDLE中添加的内容。更好地解释你的真实世界。

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