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

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Удаление определённого количества элементов в родительском блоке (https://javascript.ru/forum/events/43348-udalenie-opredeljonnogo-kolichestva-ehlementov-v-roditelskom-bloke.html)

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

Добрый день!

У нас имеется родительский контейнер с определённым количеством блоков внутри. Каким образом, оставить первые 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>

Цитата:

Сообщение от 1lider

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

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

Цитата:

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

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

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

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]);
	}
}

Цитата:

Сообщение от 1lider (Сообщение 284019)

Добрый день!

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

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

<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()">

Цитата:

Сообщение от 1lider (Сообщение 284029)

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

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 элемент, которого естественно уже нет...

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]);
   }
}

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

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]);
	}
}

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

Цитата:

Сообщение от 1lider

А не могли бы вы написать примерный код(без 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>

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