Как удалить родительский узел и / или CSS-стиль в зависимости от его потомков

Question

У меня есть родительский узел, для которого требуется стиль CSS 'padding-bottom: 15px'. Некоторые из дочерних элементов отфильтровываются из представления, в результате чего родительский узел остается в DOM со стилем css 'padding-bottom: 15px', который выглядит странным - это заставляет другой текст перемещаться вниз по странице.

Когда все дочерние элементы являются «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 Fiddle: 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 Fiddle: https://jsfiddle.net/v9Lwhqrz/