Удаление определённого количества элементов в родительском блоке

[1lider]

Добрый день!

У нас имеется родительский контейнер с определённым количеством блоков внутри. Каким образом, оставить первые 3 блока, а всё что после них, удалить полностью из DOM? Спасибо.

Пример:

<div id='container'>
   <div class='blocks'>block_1</div>
   <div class='blocks'>block_2</div>
   <div class='blocks'>block_3</div>
   <div class='blocks'>block_4</div>
   <div class='blocks'>block_5</div>
</div>

[ksa]

Каким образом, оставить первые 3 блока, а всё что после них, удалить полностью из DOM?

Просто удалять их пока есть элемент с индексом 3...

[1lider]

Просто удалять их пока есть элемент с индексом 3...

А не могли бы вы написать примерный код(без jquery)? Спасибо.

[1lider]

Пробовал такой вариант, но где-то ошибка:

var countBlocks = document.getElementById('container').children.length;
if(countBlocks > 3) {
	var hide_blocks = document.getElementById('container').children;
	for(var i=2;i<countBlocks;i++) {
		hide_blocks[i].parentNode.removeChild(hide_blocks[i]);
	}
}

[lord2kim]

Добрый день!

У нас имеется ...

Добрый...не у нас, а у вас...

<script>
var d = document;

function del_blocks() {
	var main_block = d.getElementById("container");
	var blocks = main_block.children;
	for (i=blocks.length - 1; i >= 0; i--) {
		if (i <= 2) break;
		main_block.removeChild(blocks[i]);
	}
}
</script>
<div id='container'>
   <div class='blocks'>block_1</div>
   <div class='blocks'>block_2</div>
   <div class='blocks'>block_3</div>
   <div class='blocks'>block_4</div>
   <div class='blocks'>block_5</div>
</div><input type="button" value="Delete" onClick="del_blocks()">

var countBlocks = document.getElementById('container').children.length;
if(countBlocks > 3) {
	var hide_blocks = document.getElementById('container').children;
	for(var i=2;i<countBlocks;i++) {
		hide_blocks[i].parentNode.removeChild(hide_blocks[i]);
	}
}

в вашем примере вы пытаетесь обратиться к элементам которые уже удалены...удаляете 3 элемент, остается 4 элемента, далее удаляете 4 элемент, остается 3 элемента, далее вы пытаетесь удалить 5 элемент, которого естественно уже нет...

[1lider]

var d = document;
 
function del_blocks() {
   var main_block = d.getElementById("container");
   var blocks = main_block.children;
   for (i=blocks.length - 1; i >= 0; i--) {
      if (i <= 2) break;
      main_block.removeChild(blocks[i]);
   }
}

Большое человеческое спасибо! Вариант отличный.

[lord2kim]

1lider, тут есть что поправить...как сказал ksa

var d = document;

function del_blocks() {
	var main_block = d.getElementById("container");
	var blocks = main_block.children;
	while (blocks[3]) {
		main_block.removeChild(blocks[3]);
	}
}

[1lider]

lord2kim. Благодарствую!

[ksa]

А не могли бы вы написать примерный код(без jquery)?

Как вариант...

<div id='container'>
	<div class='blocks'>block_1</div>
	<div class='blocks'>block_2</div>
	<div class='blocks'>block_3</div>
	<div class='blocks'>block_4</div>
	<div class='blocks'>block_5</div>
</div>
<script type="text/javascript">
var op=document.getElementById('container');
var o=op.getElementsByTagName('div');
while (o[3]) {
	op.removeChild(o[3]);
};
</script>

[ksa]

lord2kim опередил...