Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.12.2013, 14:41
Аспирант
Отправить личное сообщение для 1lider Посмотреть профиль Найти все сообщения от 1lider
 
Регистрация: 12.04.2013
Сообщений: 86

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

У нас имеется родительский контейнер с определённым количеством блоков внутри. Каким образом, оставить первые 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>
Ответить с цитированием
  #2 (permalink)  
Старый 02.12.2013, 14:52
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,782

Сообщение от 1lider
Каким образом, оставить первые 3 блока, а всё что после них, удалить полностью из DOM?
Просто удалять их пока есть элемент с индексом 3...
Ответить с цитированием
  #3 (permalink)  
Старый 02.12.2013, 14:57
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,449

$('.blocks:gt(2)').remove();
Ответить с цитированием
  #4 (permalink)  
Старый 02.12.2013, 14:59
Аспирант
Отправить личное сообщение для 1lider Посмотреть профиль Найти все сообщения от 1lider
 
Регистрация: 12.04.2013
Сообщений: 86

Цитата:
Просто удалять их пока есть элемент с индексом 3...
А не могли бы вы написать примерный код(без jquery)? Спасибо.
Ответить с цитированием
  #5 (permalink)  
Старый 02.12.2013, 15:03
Аспирант
Отправить личное сообщение для 1lider Посмотреть профиль Найти все сообщения от 1lider
 
Регистрация: 12.04.2013
Сообщений: 86

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

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]);
	}
}
Ответить с цитированием
  #6 (permalink)  
Старый 02.12.2013, 15:08
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

Сообщение от 1lider Посмотреть сообщение
Добрый день!

У нас имеется ...
Добрый...не у нас, а у вас...

<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 Посмотреть сообщение
Пробовал такой вариант, но где-то ошибка:

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

Последний раз редактировалось lord2kim, 02.12.2013 в 15:16.
Ответить с цитированием
  #7 (permalink)  
Старый 02.12.2013, 15:27
Аспирант
Отправить личное сообщение для 1lider Посмотреть профиль Найти все сообщения от 1lider
 
Регистрация: 12.04.2013
Сообщений: 86

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


Большое человеческое спасибо! Вариант отличный.
Ответить с цитированием
  #8 (permalink)  
Старый 02.12.2013, 15:30
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

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]);
	}
}
Ответить с цитированием
  #9 (permalink)  
Старый 02.12.2013, 15:40
Аспирант
Отправить личное сообщение для 1lider Посмотреть профиль Найти все сообщения от 1lider
 
Регистрация: 12.04.2013
Сообщений: 86

lord2kim. Благодарствую!
Ответить с цитированием
  #10 (permalink)  
Старый 02.12.2013, 15:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,782

Сообщение от 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удаление нескольких элементов bgraf Элементы интерфейса 3 07.06.2013 15:38
JSON и подсчет количества элементов KupueIIIKo Общие вопросы Javascript 7 10.01.2013 15:14
Удаление элементов из объекта jQuery glukonator jQuery 2 28.07.2012 22:15
Массивы. Динамическое удаление элементов userbanderas Элементы интерфейса 2 06.01.2012 22:29
Удаление элементов через splice. возможно ли оптимизировать? Storan Общие вопросы Javascript 0 01.10.2011 21:16