html текст без тега

#javascript #html

#javascript #HTML

Вопрос:

Как я могу удалить html текст без тега? Удалить :

 <div>
  ***remove***
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
  ***remove***
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
  ***remove***
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>

1. какого результата вы ожидаете здесь. Это не очень понятно

2. Что вы подразумеваете под удалением? Вы имеете в виду динамически или просто удаляете его?

3. Пожалуйста, объясните свой вопрос вкратце. Как вы хотите удалить и хотите полностью удалить или хотите скрыть это?

Ответ №1:

Узлы элемента имеют значение nodeType 1, поэтому вы можете перебирать все childNodes и .remove() те, у которых нет .nodeType of 1 , гарантируя, что будут сохранены только элементы:

 const div = document.querySelector('div');
[...div.childNodes].forEach((node) => {
  if (node.nodeType !== 1) {
    node.remove();
  }
});

 <div>
  ***remove***
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
  ***remove***
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
  ***remove***
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>

Менее элегантно, но вы также можете создать массив .children , чтобы получить все дочерние элементы, затем очистить контейнер и снова добавить все дочерние элементы:

 const div = document.querySelector('div');
const children = [...div.children];
div.textContent = '';
children.forEach(child => div.appendChild(child));

 <div>
  ***remove***
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
  ***remove***
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
  ***remove***
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>

Ответ №2:

Это всего лишь простое решение как раз для вашего случая.

 var content = $("div").find("p");
$("div").empty().append(content);