JQuery - удалить только текстовый контент из div

Ответ 1

Это должно сделать трюк:

$('#YourDivId').contents().filter(function(){
    return this.nodeType === 3;
}).remove();

Или используя функцию стрелки ES6:

$('#YourDivId').contents().filter((_, el) => el.nodeType === 3).remove();

Если вы хотите сделать ваш код более читабельным и вам нужна только поддержка IE9+, вы можете использовать константы типа узла. Лично я также выделю функцию фильтра и назову ее для повторного использования и еще большей читабельности:

let isTextNode = (_, el) => el.nodeType === Node.TEXT_NODE;

$('#YourDivId').contents().filter(isTextNode).remove();

Вот фрагмент со всеми примерами:

$('#container1').contents().filter(function() {
  return this.nodeType === Node.TEXT_NODE;
}).remove();

$('#container2').contents().filter((_, el) => el.nodeType === Node.TEXT_NODE).remove();

let isTextNode = (_, el) => el.nodeType === Node.TEXT_NODE;

$('#container3').contents().filter(isTextNode).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container1">
  <h1>This shouldn't be removed.</h1>
  This text should be removed.
  <p>This shouldn't be removed either.</p>
  This text should also be removed.
</div>

<div id="container2">
  <h1>This shouldn't be removed.</h1>
  This text should be removed.
  <p>This shouldn't be removed either.</p>
  This text should also be removed.
</div>

<div id="container3">
  <h1>This shouldn't be removed.</h1>
  This text should be removed.
  <p>This shouldn't be removed either.</p>
  This text should also be removed.
</div>

Ответ 2

Предполагая следующую структуру HTML:

<div class="element-to-clean">
  Content to be filtered out.
  <span class="element-to-leave-intact">
    Content to be left inthe element.
  </span>
</div>

Вы можете добиться желаемого поведения, используя следующий код JavaScript + jQuery 2.1:

$('.element-to-clean').html($('.element-to-clean').children());

Ответ 3

Вы можете сделать это с помощью простого dom:

var div=$("div")[0];
if(div.childNodes.length)
   for(var i=0;i<div.childNodes.length;i++)
   {
       if(div.childNodes[i].nodeType===3)
           div.removeChild(div.childNodes[i]);
   }

Ответ 4

Самый простой способ - это что-то вроде этого:

$('#div').html($('<div>').append($('*', '#div')).html());

Ответ 5

Ну, вероятно, это не лучший способ, но я сохранил div в переменной, а затем после того, как я удалил весь контент в теге, который я использовал, добавьте:

$('.wpcf7 form p').each(function(i){
    var el = $(this).find('span');
    if(i==4)
    el = $(this).find('input');
    $(this).empty();
    $(this).append(el);
});

Ответ 6

$('#yourDiv').text('');

Это приведет к удалению текстового содержимого.

Ответ 7

$('#yourDiv').text(''); 

Это приведет к удалению текстового содержимого.