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

Posted 2023-02-22

【中文标题】如何根据子节点删除父节点和/或 css 样式

【英文标题】：How to remove a parents node and/or css styling depending on its children

【发布时间】：2019-11-02 13:05:31

【问题描述】：

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

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

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

我确实考虑过编写一些 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/

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

【参考方案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/

【讨论】：

我看到您已将“filteredTextChild”和“nonFilteredTextChild”添加到父节点，但很遗憾，除非有一些动态方法，否则我无法执行此操作。

我使用了您在 jsfiddle 中添加的内容。更好地解释你的真实世界。