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>


Show source
| javascript   | jquery   | html   | css   2017-01-02 10:01 4 Answers

Answers ( 4 )

  1. 2017-01-02 10:01

    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>

  2. 2017-01-02 10:01

    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>

  3. 2017-01-02 10:01

    You can use jquery to hide element in differnt ways by .hide() , .fadeOut() ,.slideUp()

    or by css using display:none

    If you want the element to keep its space then you need to use,

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

    If you dont want the element to retain its space, then 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>

  4. 2017-01-02 10:01

    Try to 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>

◀ Go back