javascript - How to hide an element if another element exist - Stack Overflow

admin管理员组

文章数量:1345068

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=".1.1/jquery.min.js"></script>

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

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./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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jan 2, 2017 at 10:16 Shivkumar kondi 6,79299 gold badges3636 silver badges6464 bronze badges asked Jan 2, 2017 at 9:41 inazinaz 1,78555 gold badges2222 silver badges4343 bronze badges 3

• 4 There are a lot of more helpful and interesting questions which are not even getting upvoted once and this, trivial one got 7 upvotes. Hillarious. – kind user Commented Jan 2, 2017 at 10:09
• If something like this is not a duplicate, it's bound to be helpful to many. Trivial isn't trivial for a beginner. – JollyJoker Commented Jan 2, 2017 at 12:00
• @JollyJoker Yes, but upvotes are for questioning quality, not the question itself. "How to cure cancer" (on a appropriate SE site) would not be a good question, because even though it would be helpful to many, there was no research or previous attempt to do so. But this misconception (or reflex) is unfortunately very widespread throughout the network, not just this post. – Kroltan Commented Jan 2, 2017 at 12:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

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 pletely 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./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>

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./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>

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./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>

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./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>

本文标签： javascriptHow to hide an element if another element existStack Overflow