2

Basically, I have a simple div with a h2 and p tag contained within the div and I was wondering if there was a way I could possibly remove the styling on the div if the P did not exist?

markup and styling below. 

<style>
.hotel-header { min-height: 100px; }
</style>

<div class="hotel-header">
<h2>Hotel Name</h2>
<p>Hotel address</p>
</div>

any help or tips would be appreciated.

Thanks in advance!

Danzel91
  • 113
  • 9
  • If only CSS would support the [`:has`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) pseudo-class... – Robby Cornelissen Jul 31 '18 at 09:50

  • Hotel Name

    Hotel address

     – Ravi Rajindu Jul 31 '18 at 10:16
  • @RaviRajindu removing the class is not an option - h2 class has padding top and bottom and this then causes alignment issues – Danzel91 Jul 31 '18 at 10:33
  • if(divItem.getElementsByTagName('P').length == 0){ divItem.style.minHeight = '0px'; } – Ravi Rajindu Jul 31 '18 at 10:49

1 Answers1

0

You can try with:

const headers = document.getElementsByClassName('hotel-header');
for (let i = 0; i < headers.length; i++) {
  if (headers.item(i).getElementsByTagName('p').length === 0) {
    headers.item(i).classList.remove('hotel-header');
  }
}
hsz
  • 148,279
  • 62
  • 259
  • 315