How to hide an element if another element exist

Question

I have a button with classname ADD to create an i-frame.

when clicked on add I would like to hide the button if that iframe creates. is there a way to hide div with classname : add after iframe creation?

Here is my snippet :

$(document).ready(function() {
  $(".adding").click(function(e) {
    e.preventDefault();
    $('#iframeplace').html('<span class="loading">LOADING...</span>');

    setTimeout(function() {
      $("#iframeplace").html("<iframe name='someFrame' id='someFrame' width='560' height='315'></iframe>");
    }, 3000);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="secondpage.html" class="adding">
  <div class="ADD">ADD</div>
</a>
<div id="iframeplace"></div>

Answer 1

You can achieve that by using .length which returns the number of elements for the specified selector. In your case the selector would be #iframeplace.

How you will hide the item is completely up to you - you can either use jQuery hide method or hide it using the CSS.

$(document).ready(function() {
  $(".adding").click(function(e) {
    e.preventDefault();
    $('#iframeplace').html('<span class="loading">LOADING...</span>');

    setTimeout(function() {
      $("#iframeplace").html("<iframe name='someFrame' id='someFrame' width='560' height='315'></iframe>");
    }, 3000);
    
    if($('#iframeplace').length == 1)
    {
        $(".adding").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="secondpage.html" class="adding">
  <div class="ADD">ADD</div>
</a>
<div id="iframeplace"></div>

Answer 2

It's hard to say which style a and nested div have, so you can hide either a with class name adding or div with class name ADD. Anyway you need to do it after iframe load.

$(document).ready(function() {
  $(".adding").click(function(e) {
    e.preventDefault();
    $('#iframeplace').html('<span class="loading">LOADING...</span>');

    setTimeout(function() {
      $("#iframeplace").html("<iframe name='someFrame' id='someFrame' width='560' height='315'></iframe>");
      $(".ADD").css("display", "none");
   }, 3000);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="secondpage.html" class="adding">
  <div class="ADD">ADD</div>
</a>
<div id="iframeplace"></div>