Question

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

当所有子元素均为'display：hidden'时，如何完全删除父节点或仅删除CSS填充？

我尝试使用Javascript（请不要使用jQuery）在子元素包含特定类时删除父节点。如果存在此类，请删除父节点。问题在于，如果有多个子元素，则代码一旦遇到一个用特定类标记的子元素，就会删除父元素。我只希望在所有子元素均为'display：hidden'的情况下删除父/填充。

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

下面的代码是我整理来帮助解释我的情况的。但是为了澄清起见，我将Vue.js与for循环一起使用。 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/

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

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/

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

1 个答案: