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

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

1 голос
/ 21 июня 2019

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

<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>

Ответы [ 3 ]

1 голос
/ 21 июня 2019

Whit Javascript вы можете просто получить все childNodes элемента с помощью id=parent и затем переместить эти потомки в .remove () те, которые имеют nodeType равно Node.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>
1 голос
/ 21 июня 2019

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

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>
0 голосов
/ 21 июня 2019

Решение с использованием 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>
...