Форум

Сергей_46 · #1 (**permalink**) 25.07.2013, 17:24

Всем привет, в JS новичок и вот задумался, как можно удалить все пустые узлы на HTML странице.
Написал скрипт - удаляет пустые узлы проходя по firstChild узлам. Есть условие поднятия на уровень выше, если кончились узлы для проверки. Но он почему-то не работает. Советы по кодированию приветствуются.
Проверяю в FF.

window.onload = function() {
		var body = document.body;
		var k = 0;
			function del_empty_nodes(obj) {
				if ((obj.childNodes.length != 0) && (obj.childNodes.length != 1)) {
					for (var i = 0; i < obj.childNodes.length; i++) {
						if (obj.childNodes[i] instanceof Text) {
							obj.removeChild(obj.childNodes[i]);
						}
					}
					del_empty_nodes(obj.firstChild);
				}else {
					if (obj.nextSibling.nodeType == 1) {
						del_empty_nodes(obj.nextSibling);
					}
					if (obj.parentNode == document.body) {
						return;
					}
					if (obj.parentNode.nextSibling.nodeType == 1) {
						var obj = obj.parentNode.nextSibling;
						del_empty_nodes(obj);
					}else {
						var obj = obj.parentNode.parentNode;
						del_empty_nodes(obj.nextSibling);
					}
					
				}
			}
		del_empty_nodes(body);	
	}

<div id="div">
		<form action="#" method="POST" id="form">
			<input type="radio" name="rad_1" onclick="selThis(this)"/>
			<input type="radio" name="rad_2" onclick="selThis(this)"/>
			<input type="radio" name="rad_3" onclick="selThis(this)"/>
		</form>
		<div>
			<p>Новый блок</p>
			<p>Новый блок</p>
			<p>Новый блок</p>
		</div>
	</div>
	<p>11111111111111111111111111111111111111</p>

рони · #2 (**permalink**) 25.07.2013, 18:38

Сергей_46,
а что по вашему пустой узел?

cyber · #3 (**permalink**) 25.07.2013, 18:39

Сергей_46, вот http://learn.javascript.ru/traversing-dom#children и не страдайте фигней .

devote · #4 (**permalink**) 25.07.2013, 18:47

<div></div><div></div><div></div><div></div><input />
<script>
    alert('сейчас пустых элементов всего: ' + document.querySelectorAll('body :empty').length);

    var emptyElements = document.querySelectorAll('body :empty');
    for(var i = emptyElements.length, elem; elem = emptyElements[--i];) {
        elem.parentNode && elem.parentNode.removeChild(elem);
    }

    alert('Осталось пустых элементов всего: ' + document.querySelectorAll('body :empty').length);
</script>

рони · #5 (**permalink**) 25.07.2013, 18:57

devote,
а если так ?

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div><div></div><div></div><div></div><div></div></div><input />
<script>
    alert('сейчас пустых элементов всего: ' + document.querySelectorAll('body :empty').length);

    var emptyElements = document.querySelectorAll('body :empty');
    for(var i = emptyElements.length, elem; elem = emptyElements[--i];) {
        elem.parentNode && elem.parentNode.removeChild(elem);
    }

    alert('Осталось пустых элементов всего: ' + document.querySelectorAll('body :empty').length);
</script>

</body>

</html>

devote · #6 (**permalink**) 25.07.2013, 19:03

Сообщение от рони

а если так ?

ну тут рекурсия нужна
что-то типо:

<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
 
<body>
<div><div></div><div></div><div></div><div></div></div><input />
<script>
    alert('сейчас пустых элементов всего: ' + document.querySelectorAll('body :empty').length);
 
    for(var elem; elem = document.querySelector('body :empty'); ) {
        elem.parentNode.removeChild(elem);
    }
 
    alert('Осталось пустых элементов всего: ' + document.querySelectorAll('body :empty').length);
</script>
 
</body>
 
</html>

рони · #7 (**permalink**) 25.07.2013, 20:00

devote,
ок ) только считатьли инпут или картинку пустым узлом вот вопрос?

devote · #8 (**permalink**) 25.07.2013, 22:14

Исключить IMG, INPUT

<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>
 
<body>
<div><div></div><div></div><div></div><div></div></div><input />
<script>
    alert('сейчас пустых элементов всего: ' + document.querySelectorAll('body :empty:not(img):not(input)').length);
 
    for(var elem; elem = document.querySelector('body :empty:not(img):not(input)'); ) {
        elem.parentNode.removeChild(elem);
    }
 
    alert('Осталось пустых элементов всего: ' + document.querySelectorAll('body :empty:not(img):not(input)').length);
</script>
 
</body>
 
</html>

cyber · #9 (**permalink**) 26.07.2013, 00:16

рони,
devote,
можно удалить все узлы, но зачем?
или у вас спортивный интерес?)

Форум

Справочник

Discord чат

Курсы javascript