Как удалить текст, не затрагивая дочерние элементы?

У меня есть div с дочерними div, а также некоторый текст. Используя jQuery/JS, я хочу оставить дочерние элементы в покое и удалить текст.

<div id = "parent">
  <div>keep this</div>
  <div>keep this</div>
  Some random text that can't be predicted (to be removed)
  <div>keep this</div>
</div>

Как указано в комментарии ниже, у меня нет возможности изменять DOM. Я могу только вводить JS.

— 21.06.2019 02:10

Возможно дублирование из stackoverflow.com/questions/4106809/…

— 21.06.2019 02:32

javascript jquery html selector

21.06.2019 01:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

193

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать Триуокер, чтобы найти все текстовые узлы, которые являются прямыми дочерними элементами вашего корневого элемента, и удалить их.

function removeChildTextNodes(root)
{
  var treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ALL, {
    acceptNode: function(node) { if (node.nodeType === 3) return NodeFilter.FILTER_ACCEPT },
  }, true);
  var currentNode = treeWalker.firstChild();
  while(currentNode)
  {
      var removedNode = treeWalker.currentNode;
      currentNode = treeWalker.nextNode()
      removedNode.remove();
  }
}

var root = document.querySelector('#parent');
removeChildTextNodes(root);

<div id = "parent">
  <img />
  Some random text that can't be predicted (to be removed)
  <div>keep this</div>
  Some random text that can't be predicted (to be removed)
  <h2>
    keep this
  </h2>
  Some <strong>random</strong> text that can't be predicted (to be removed)
  <a>keep this</a>
</div>

21.06.2019 03:19

Решение с использованием jQuery

$('.parent')
  // Return direct descendants. This also returns text nodes, as opposed to children()
  .contents()
  // Target text nodes only
  .filter(function() {
    return this.nodeType === Node.TEXT_NODE;
  }).remove();

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "parent">
  <div>keep this</div>
  <div>keep this</div>
  Some random text that can't be predicted (to be removed)
  <div>keep this</div>
</div>

<div class = "parent">
  Some random text in another location
  <div>keep this</div>
  <div>keep this</div>
  <div>keep this</div>
  More random text
</div>

21.06.2019 03:30

Ответ принят как подходящий

С Javascript вы можете просто получить все дочерние узлы элемента с id=parent, а затем пройти эти дочерние элементы к .Удалить() тем, у которых тип узла равен Узел.TEXT_NODE:

let childs = document.getElementById("parent").childNodes;
childs.forEach(c => c.nodeType === Node.TEXT_NODE && c.remove());

<div id = "parent">
  <div>keep this</div>
  <div>keep this</div>
  Some random text that can't be predicted (to be removed)
  <div>keep this</div>
</div>

Или, альтернативно, используя JQuery.contents(), вы можете использовать следующий подход:

$("#parent").contents().each(function()
{
    if (this.nodeType === Node.TEXT_NODE) this.remove();
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id = "parent">
  <div>keep this</div>
  <div>keep this</div>
  Some random text that can't be predicted (to be removed)
  <div>keep this</div>
</div>

Вы также можете использовать c.nodeType == 3 (первый пример) или this.nodeType == 3 (второй пример). :-)

— 25.06.2019 04:56

21.06.2019 03:42