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)

1lider 02.12.2013 14:41

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

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

Цитата:

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

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

Rise 02.12.2013 14:57

$('.blocks:gt(2)').remove();

1lider 02.12.2013 14:59

Цитата:

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

1lider 02.12.2013 15:03

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

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 02.12.2013 15:08

Цитата:

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

1lider 02.12.2013 15:27

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 02.12.2013 15:30

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 02.12.2013 15:40

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

ksa 02.12.2013 15:43

Цитата:

Сообщение от 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>


Часовой пояс GMT +3, время: 10:07.