Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.10.2018, 17:08
Профессор
Отправить личное сообщение для atanov Посмотреть профиль Найти все сообщения от atanov
 
Регистрация: 27.06.2016
Сообщений: 180

удаление определенных элементов
Доброго времени суток.

Есть такой незамысловатый html:

table
{
	border-collapse: collapse;	
}
td
{
	height: 20px;
	width: 20px; 
	border: solid black 1px;
}
.td1
{
	height: 20px;
	width: 60px; 
	border: solid black 1px;
}


<link rel = "stylesheet" type = "text/css" href = "114.css">
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">1</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">2</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">3</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">4</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">5</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">6</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">7</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<button>Click</button>
<script src = "114.js"></script>


document.getElementsByTagName('button')[0].addEventListener('click', gggg);
function gggg()
{
	let a = document.getElementsByClassName('td1').length;
	for (let i = 0; i < a; i++)
	{
		document.getElementsByClassName('td1')[i].parentNode.parentNode.parentNode.remove();
	}
}


Задачка - как удалить таблицы, в которых есть td с классом td1.
Объясните пожалуйста полному почему нечётные удаляются???
Ответить с цитированием
  #2 (permalink)  
Старый 22.10.2018, 17:38
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">1</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">2</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">3</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">4</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">5</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">6</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">7</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<script>
let a = document.getElementsByClassName('td1');

for (var i = a.length - 1; i >= 0; i--) { 
   a[i].parentNode.parentNode.parentNode.remove();
};
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 22.10.2018, 17:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от atanov
почему нечётные удаляются???
потому что getElements это живая коллекция, при удалении создаётся новый список элементов.
решение удалять с конца или document.querySelectorAll вместо getElements
Ответить с цитированием
  #4 (permalink)  
Старый 22.10.2018, 17:49
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от рони
document.querySelectorAll вместо getElements
Простая замена по скрипту ТопикСтартера не поможет - он же все время коллекцию перечитывает.
Ответить с цитированием
  #5 (permalink)  
Старый 22.10.2018, 18:03
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от Dilettante_Pro
Простая замена по скрипту ТопикСтартера не поможет - он же все время коллекцию перечитывает.
поможет если ее перед циклом сохранить в переменную
document.getElementsByTagName('button')[0].addEventListener('click', gggg);
function gggg()
{
	let a = document.getElementsByClassName('td1').length;
	var x = document.querySelectorAll('.td1');
	for (let i = 0; i < a; i++){
		x[i].parentNode.parentNode.parentNode.remove();
	}
}
Ответить с цитированием
  #6 (permalink)  
Старый 22.10.2018, 18:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Dilettante_Pro,
да в его случае достаточно убрать i из строки удаления
Ответить с цитированием
  #7 (permalink)  
Старый 22.10.2018, 18:10
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от j0hnik
поможет если ее перед циклом сохранить в переменную
Дык об этом я и говорю. Это уже не простая замена.
Ответить с цитированием
  #8 (permalink)  
Старый 22.10.2018, 18:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

atanov,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
     table
{
	border-collapse: collapse;
}
td
{
	height: 20px;
	width: 20px;
	border: solid black 1px;
}
.td1
{
	height: 20px;
	width: 60px;
	border: solid black 1px;
     background-color: #FF0000;
}

  </style>

</head>

<body>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">1</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">2</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">3</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">4</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">5</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">6</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td class = "td1">7</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr>
			<td></td><td></td><td></td>
		</tr>
	</tbody>
</table>
<button>Click</button>
<script>
document.getElementsByTagName('button')[0].addEventListener('click', gggg);
function gggg()
{
	let a = document.getElementsByClassName('td1').length;
	for (let i = 0; i < a; i++)
	{
		document.getElementsByClassName('td1')[0].parentNode.parentNode.parentNode.remove();
	}
}

</script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 22.10.2018, 18:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

j0hnik,
строки 4 и 5 лучше поменять с друг другом.
Ответить с цитированием
  #10 (permalink)  
Старый 22.10.2018, 18:16
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от рони
в его случае достаточно убрать i из строки удаления
А также All
let a = document.querySelectorAll('.td1').length;

for (var i = 0; i < a; i++) { 
   document.querySelector('.td1').parentNode.parentNode.parentNode.remove();
};
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удаление и восстанавелние элементов (jquery) saper333 Общие вопросы Javascript 12 26.11.2015 15:23
Удаление и восстанавелние элементов (jquery) saper333 Общие вопросы Javascript 5 23.11.2015 15:50
Удаление элементов из массива Noin Javascript под браузер 3 18.07.2015 17:37
Массивы. Динамическое удаление элементов userbanderas Элементы интерфейса 2 06.01.2012 23:29
Удаление элементов через splice. возможно ли оптимизировать? Storan Общие вопросы Javascript 0 01.10.2011 21:16