javascript - 如果存在另一个元素，如何隐藏一个元素

Question

我有一个带有类名 ADD 的按钮来创建一个 i-frame。

单击添加时，如果该 iframe 创建，我想隐藏该按钮。有没有办法用类名隐藏 div:在 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>");
    }, 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

您可以通过使用 .length 来实现，它返回指定选择器的元素数。在您的情况下，选择器将是 #iframeplace。

如何隐藏元素完全取决于您 - 您可以使用 jQuery hide 方法或使用 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>