如何根據子節點刪除父節點和/或CSS樣式

Question

我有一個父節點，需要'padding-bottom：15px'css樣式。 一些子元素從視圖中過濾掉，這導致父節點保留在DOM中，其中“padding-bottom：15px”css樣式看起來很奇怪 - 這會導致其他文本被壓縮到頁面上。

當所有子元素都是'display：hidden'時，如何完全刪除父節點，或者只刪除css填充？

我試圖使用Javascript - 請，沒有jQuery - 在子元素包含特定類時刪除父節點。 如果存在此類，請刪除父節點。 問題是如果有多個子元素，一旦代碼遇到一個用某個類標記的子元素，它就會刪除父元素。 如果所有子元素都是'display：hidden'，我只希望刪除父元素/填充。

我確實考慮過寫一些Javascript來根據子節點向父節點添加類，然后檢查父類，如果它們包含一個'active'類，表明視圖中有一個子元素，那么父節點不是除去。 但是，我目前的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樣式時才刪除父節點和/或填充。 我最好只想刪除樣式，但從我讀過的內容來看，這並不容易實現。

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/