如何使用JS或Jquery删除父html元素？

Question

我搜索了但没有找到我想要的东西，我想要做的是：

<main class="content">
    Content
    <nav class="search">
    </nav>
</main>

并在特定媒体查询中将其更改为

<main class="content">
    Content
</main>
<nav class="search">
</nav>

这可能吗？ 感谢您的任何帮助！

Answer 1

尝试insertAfter

 jQuery(function($) { $(".search").insertAfter(".content"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <main class="content"> Content <nav class="search"> </nav> </main> 

Answer 2

通常，我会尝试很好地构造HTML，以便在CSS中处理与媒体查询有关的所有内容。 我不确定您的HTML是什么样，但是最近我了解了window.matchMedia()方法，因此我认为您可以使用它。

jQuery的

if (window.matchMedia("(min-width: 400px)").matches) {
  $(".search").insertAfter(".content");
} else {
  $(".search").appendTo(".content");
}

Answer 3

您可以使用insertAfter删除元素，然后在特定元素之后重新插入。

要通过媒体查询处理此问题，可以使用Modernizr的mq方法 。 它具有比window.watchMedia（）更好的浏览器支持。 它支持所有能够理解CSS中媒体查询的浏览器。

   if (Modernizr.mq('(max-width: 320px)')) {
       $(".search").insertAfter(".content");
   } else {
    //...
   }