Как удалить родительский элемент html с помощью JS или JQuery?

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's mq method. Он имеет лучшую поддержку браузера, чем window.watchMedia(). Он поддерживает все браузеры, которые могут понимать медиа-запросы в CSS.

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