javascript - 使用$(this)和.not选择除iframe以外的所有内容

我已经编写了这段代码，并且可以正常工作：

HTML：

<div class="service-box">
  <!--Services Title 1-->
  <h3>WordPress installation</h3>
  <!--Content for title 1-->
  <div class="service-content">
   <!--Your youtube service video iframe code-->
    <iframe width="420" height="315" src="https://www.youtube.com/embed/R7hHfoffIM4?rel=0" frameborder="0" allowfullscreen></iframe>
    <!--Your service description-->
    <p>I am offering services like:</p>
    <p>WordPress installation to your already purchased domain and hosting.</p>
    <p>Also I am able to create subdomain and install wordpress on it.</p>
    <p>If You need me to make a WP backup, I can do that for You.</p>
    <p>In case that You need me to restore your website from my previously made backup I am here for You.</p>
  </div>

JS：

$(document).on('click', '.service-box', function(){
    $('#siteOverlay').addClass('overlay-active');
    $('#popupWindow').addClass('service-active');
    $('#popupWindow #contentBox').html($(this).html());   //I will change this line
    $('body').css('overflow', 'hidden');
});

然后我尝试选择除IFRAME标签之外的所有内容，例如：

 $('#popupWindow #contentBox').html($(this).not($('iframe')).html());

或像这样：

$('#popupWindow #contentBox').html($(this).not('iframe').html());

它不起作用。
我也尝试过在所有这样的组合中使用：not选择器：

$('#popupWindow #contentBox').html($(this:not).html());

什么都没用。有谁知道答案吗？
谢谢！

最佳答案

您要从被单击元素的html中删除iframe，而不是从被单击元素本身中删除iframe。所以...。您将不得不克隆它并将其从克隆中删除，然后追加它。

var clone = $(this).clone();
clone.find('iframe').remove();
$('#popupWindow #contentBox').html(clone.contents());