How to hide an element if another element exists

Question

I have a button with the class name ADD to create an i-frame.

When I click on add, I would like to hide the button if this iframe creates. is there any way to hide div with class name: add after creating iframe?

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 this by using .length , which returns the number of elements for the specified selector. In your case, the selector will be #iframeplace .

How you hide the element is completely up to you - you can use the jQuery hide method or hide it using 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 what style a and nested div are, so you can hide either a with the class name adding , or a div with the class name ADD . In any case, you need to do this after loading the iframe.

 $(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> 

Answer 3

You can use jquery to hide an element in different ways .hide() , .fadeOut() , .slideUp()

or css using display:none

If you want the element to retain its space, you need to use

 $('.ADD').css('visibility','hidden') 

If you do not want the element to retain its space, you can use

 $('.ADD').css('display','none') 

 $(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>"); $(".adding").hide(); }, 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 4

Try something like this.

Add this condition.

  if($( "#iframeplace" ).contents().find( "iframe" )){ $(".ADD").css('display','none'); } 

 $(document).ready(function() { $(".adding").click(function(e) { e.preventDefault(); $('#iframeplace').html('<span class="loading">LOADING...</span>'); if($( "#iframeplace" ).contents().find( "iframe" )){ $(".ADD").css('display','none'); } setTimeout(function() { $("#iframeplace").html("<iframe name='someFrame' id='someFrame' width='560' height='315'></iframe>"); }, 3000); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <a href="secondpage.html" class="adding"> <div class="ADD">ADD</div> </a> <div id="iframeplace"></div>