如何用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

通常情況下，我嘗試讓任何與媒體查詢在CSS的處理來構造HTML不夠好。我不確定你的HTML看起來像什麼，但最近我已經知道了window.matchMedia()方法，所以我認爲你可以使用它。

jQuery的

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

Answer 3

可以使用insertAfter特定元素後要刪除的元素，然後重新插入。

要處理來自媒體查詢的此問題，您可以使用Modernizr's mq method。它比window.watchMedia（）有更好的瀏覽器支持。它支持所有可以理解CSS中媒體查詢的瀏覽器。

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