How to remove a parents node and/or css styling depending on its children

user_8165521 0
Viewed 842

I have a parent node that requires 'padding-bottom:15px' css styling. Some of the child elements are filtered from view which causes the parent node to remain in the DOM with a 'padding-bottom:15px' css style which looks odd - this causes other text to be pushed down the page.

When all child elements are 'display:hidden', how can I remove either the parents node entirely, or just the css padding?

I have attempted to use Javascript - please, no jQuery - to remove the parents node when the child elements contain a specific class. If this class is present, remove the parent node. The problem is that if there are multiple child elements, as soon as the code encounters one child element that is tagged with a certain class, it removes the parent. I only want the parent to be removed/padding removed if all child elements are 'display:hidden'.

I did think about writing some Javascript to add classes to the parent node depending on the children, and then checking the parents classes, and if they contain an 'active' class which indicates there is a child element in view, the parent node is not removed. But, my current Javascript skills are limited so I would not know where to start.

The below code is something I put together to help explain my situation. But for clarification, I am using Vue.js with a for loop. The for loop cycles through data and dynamically determines what class to assign - filtered/notfiltered.

Snippet of actual code:

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

Fiddle code to help my explanation:

<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/

I want the parent node and/or padding to be removed only if all child elements contain a specific class/css styling of 'display:none'. Preferably I only want the styling to be removed, but from what I have read, this is not easy to accomplish.

vue.js css dom html javascript
1 Answers

To do what you want, you have to remove the class from the parent and use the removeChild function from the parent. 

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/

user_47143050
Related