Hide a firstElementChild if parentElement doesn't contain text

Question

I need to hide an icon if there's no text in the parentElement (h4.undefined). Sometimes text can be present but in the situation it is not, I need to hide the icon.

The way I did it, gives me an error in console.log of browser.

What would be a proper way to do it?


  
    i
    
    
  
  
    undefined

JS code:

let test = document.querySelectorAll('h4.undefined');

Array.from(test).forEach(i => {
  if(i.textContent.includes('undefined')) {
      i.style.display = 'none'; // hiding el that contains undefined text
      // let inner = document.querySelectorAll('.icon-calendar');
      // Array.from(inner).forEach(j =>{
      //     j.style.display = 'none';
      // })
  }
  if(i.childNodes.length === 0) {

  } else {
    i.childNodes[1].style.display = 'none'; // error in browser's console.log - Cannot read properties of undefined (reading 'style')
  }
});

Nitheesh · Answer

Its because the second h4 tag with text content undefined does not contains any childNodes.

I hope this is what you are looking for. If yes then you have to use else if ins the second condition check

let test = document.querySelectorAll("h4.undefined");

Array.from(test).forEach((i) => {
  if (i.textContent.includes("undefined")) {
    i.style.display = "none"; // hiding el that contains undefined text
    // let inner = document.querySelectorAll('.icon-calendar');
    // Array.from(inner).forEach(j =>{
    //     j.style.display = 'none';
    // })
  }
  // Change here
  else if (i.childNodes.length === 0) {
  } else {
    i.childNodes[1].style.display = "none";
  }
});


  
    i
    
    
  
  undefined

Hide a firstElementChild if parentElement doesn't contain text

1 Answers