Jerpl Jerpl - 1 month ago 11
CSS Question

If element contains h1, remove h1 from another element

I'm trying to dynamically remove an h1 from a page if the h1 is already used in another area on the same page. For example, if the h1 is in a banner along the top of a page, it won't be needed in any area underneath on the same page.

<div class="banner">
<h1>Check to see if title here</h1>
</div>

<div id="rest_of_page">
<h1>Remove this h1 if the above h1 exists already</h1>
</div>


Tried a couple of things but they seem to remove both h1 tags and not just the bottom one should the top one exist. There may be some pages where the banner isn't used, so the h1 underneath will need to stay.

Answer

You can toggle the second banner:

$(function() {
  $("#rest_of_page>h1").toggle(
    $(".banner>h1").length==0
  )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner">
  <h1>Check to see if title here</h1>
</div>

<div id="rest_of_page">
  <h1>Remove this h1 if the above h1 exists already</h1>
</div>

Or remove it

$(function() {
  if ($(".banner>h1").length>0) $("#rest_of_page>h1").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="banner">
  <h1>Check to see if title here</h1>
</div>

<div id="rest_of_page">
  <h1>Remove this h1 if the above h1 exists already</h1>
</div>

Comments