Как удалить html с помощью jquery не удаляя содержимое?

Question

[Алексей Гончаров]

Есть, например, такой html:

<div class="asd">
        <p>asd</p>
    </div>

Как удалить div с классом asd, при этом не удалив тег p, то есть его содержимое? И все это надо сделать на определённом разрешении экрана. Это возможно сделать на jquery?

Comments

[Сергей Карбивничий]

Можно попробовать скопировать тег "p", далее удалить "div" и вставить "p". Насколько быстро это будет работать - не знаю.

[ProjectSoft]

Для чего это вообще делать? Зачем?
Вопрос реальный и без шуток.

[Алексей Гончаров]

ProjectSoft, для того чтобы удалять теги ненужные при изменении разрешения

[ProjectSoft]

Алексей Гончаров, хорошо. Что мешает присутствию .asd при изменении разрешения?
Просто я уверен, что вы копаете ни в ту сторону.

Answer 1

[lUser L]

https://jsfiddle.net/62a1zLh5/
unwrap(); - убивает родителя, но при этом сохраняет детей.
clid.unwrap();

Answer 2

[Rsa97]

const element = document.querySelector('.asd');
element.outerHTML = element.innerHTML;

Comments

[Алексей Гончаров]

А как еще это сделать чтобы работала на min-width разрешении? То есть когда разрешение будет 700px то срабатывал этот скрипт

[Алексей Гончаров]

Но чтобы потом этот родитель возвращался. Например если разрешение больше 700px то удалялся родитель, а если 600px то оставался. И все это чтобы менялось

[Алексей Гончаров]

Я попробовал это:

function getWindowWidth() {
  return window.innerWidth || document.body.clientWidth;
}

if (getWindowWidth() >= 400) {
  const element = document.querySelector('.asd');
  element.outerHTML = element.innerHTML;
}

Но он срабатывает только один раз при загрузке страницы, если я зайду в панель разработчика в google chrome и буду изменять разрешение уже загруженной страницы, то этот скрипт не будет изменять. Он будет работать единожды за одно обновление страницы.

Я хочу так:

Чтобы этот скрипт выполнялся в реальном времени, то есть когда я изменял разрешение браузера этот скрипт удалял родителя и возвращал

[Rsa97]

Алексей Гончаров, window.addEventListener('resize', ...)

[Алексей Гончаров]

Rsa97, скажите пожалуйста это добавить в функцию или в блок if?

[Олег]

Алексей Гончаров,

window.addEventListener('resize', function(){ - это прослушиватель события resize (проверяет произошло ли изменение размеров окна браузера)
 если ширина экрана меньше чего-то, то ... $('.asd').find('p').addClass('wrap-this').unwrap(); - назначить обёрнутому <p> класс wrap-this и убрать обёртку
 если ширина экрана больше чего-то, то  ... $('.wrap-this').wrap('<div class="asd"></div>'); - обернуть .wrap-this в .asd
})

[Алексей Гончаров]

Олег, а куда именно вписать разрешение в функции, вы слова написали и теперь я туплю

[Олег]

Алексей Гончаров, печально конечно, вам бы тогда сперва документацию по javascript и jquery почитать. А то получается вопрос: "Сделайте всё за меня"

window.addEventListener('resize', function(){
 if( getWindowWidth() >= 400){
      $('.asd').find('p').addClass('wrap-this').unwrap();
 }
 if( getWindowWidth() < 400){
      $('.wrap-this').wrap('<div class="asd"></div>');
 }
})

размеры и знаки > < подправьте под ваши нужды.

А вообще это с помощью CSS @media запросов для разных размеров экрана можно поменять - сделав набор стилей для вашего класса .asd с нужными параметрами размеров/отступов и ещё чего-то, что вам мешает на разных размерах экрана