Рекурсивно удалить пустые узлы из html

Question

Я хочу удалить пустые элементы из некоторой строки html. Я знаю, что я мог запустить что-то вроде:

$('p').each(function(index, item) { 
    if($.trim($(item).text()) === "") { 
     $(item).remove(); 
    } 
}); 

Проблема заключается в том, что я хочу, чтобы удалить все пустые узлы - не только р. Также я хочу, чтобы сценарий рассматривал p-узел в <p><span></span></p> как пустой, поскольку он содержит только пустые элементы. У вас есть простая реализация чего-то подобного?

[EDIT] Я забыл добавить: я могу использовать jQuery, но html, который я хочу перемещать и редактировать, - это строка, а не фактический документ. Итак, как я могу сделать эту операцию? Я попытался с помощью var html = $.parseHTML('<p><span></span></p>'), но после каждого цикла я все еще получаю ту же строку ...

Answer 1

Недавно я искал с к той же проблеме. Ответ был рекурсивной.

function removeEmptyTagsRecursively($el) { 
    if ($el.children().length) { 

     $el.children().each(function(i, val) { 
      removeEmptyTagsRecursively($(val)); 
     }); 

     $el.children(':empty').remove(); 
    } 
} 

Fiddle здесь: https://jsfiddle.net/635utakr/9/

Answer 2

Try что-то вроде

do { 
    empty = $("*:empty"); 
    count = empty.length; 
    empty.remove(); 
} 
while (count > 0); 

Это итеративный, а не рекурсивный, но должны сделать трюк

Answer 3

На самом деле Ваш код работаем нормально. См. Это fiddle.

Отображается только с содержанием внутри. Тогда что вы хотите?

HTML

<p>hi 1</p> 
<p></p> 
<p><span>hi 2</span></p> 
<p><span></span></p> 

Script

$('p').each(function(index, item) { 
    if($.trim($(item).text()) === "") { 
     $(item).remove(); 
    } 
}); 

Answer 4

Вы можете достичь этого, используя код ниже: -

function removeEmptyTag(root) { 
    var $root = $(root); 
    $root.contents().each(function() { 
    if (this.nodeType === 1) { 
     removeEmptyTag(this); 
    } 
    }); 

    if (!$root.is("area,base,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr") && !$root.html().trim().length) { 
    $root.remove(); 
    } 
} 

removeEmptyTag("#divIdHere"); 

Fiddle

Answer 5

Вот Твик из Paul's function для ванильных JS (требуется Element.matches() polyfill):

function removeEmpty(parent) { 
    // for each child 
    [].forEach.call(parent.children, function(child) { 
     // repeat operation 
     removeEmpty(child); 

     // remove if it matches selector 
     if (child.matches(':empty')) { 
      parent.removeChild(child); 
     } 
    }); 
}