Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 22.10.2018, 19:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,850

Dilettante_Pro,
зачем дважды искать одно и тоже
Ответить с цитированием
  #12 (permalink)  
Старый 22.10.2018, 19:18
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,260

рони, вот так симпатичней
document.getElementsByTagName('button')[0].addEventListener('click', e=> 
	document.querySelectorAll('.td1').forEach(el=> el.closest('table').remove()));
Ответить с цитированием
  #13 (permalink)  
Старый 22.10.2018, 19:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,850

<!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.querySelectorAll('.td1');
    let x = a.length;
	for (let i = 0; i < x; i++)
	{
		a[i].parentNode.parentNode.parentNode.remove();
	}
}

</script>
</body>
</html>
Ответить с цитированием
  #14 (permalink)  
Старый 22.10.2018, 19:20
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,700

Сообщение от рони
зачем дважды искать одно и тоже
Это не я - это ТС. В моем примере такого нет.
Ответить с цитированием
  #15 (permalink)  
Старый 22.10.2018, 19:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,850

j0hnik,
Dilettante_Pro,
Ответить с цитированием
  #16 (permalink)  
Старый 23.10.2018, 11:44
Кандидат Javascript-наук
Отправить личное сообщение для atanov Посмотреть профиль Найти все сообщения от atanov
 
Регистрация: 27.06.2016
Сообщений: 123

j0hnik,
Dilettante_Pro,
рони
,
Спасибо большое!
Да, моя ошибка в том, что коллекция меняется. Я то думал, что при удалении элемента, он сам из DOM исчезает, но ссылка на него и он сам присутствует. Вот здесь об это идёт речь:
https://developer.mozilla.org/ru/doc...ildNode/remove
Ответить с цитированием
  #17 (permalink)  
Старый 23.10.2018, 12:44
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,700

atanov,
В этом примере
Сообщение от atanov
здесь об это идёт речь:
var elem = document.querySelector("#one");
elem.remove();
alert(document.querySelector("#box").innerHTML); //Исчез блок #one
alert(elem); //Но как видите, сам объект еще жив

используется document.querySelector, который создает ссылку на найденный элемент. Эта ссылка - переменная elem - существует независимо от того, удален сам элемент или нет. Если после удаления ее "освежить":
elem = document.querySelector("#one");
- то она станет null

Вы же использовали document.getElementsByClassName(), который создает "живую" коллекцию элементов, которая переформировывается при удалении определенных элементов из коллекции.
К тому же вы еще и самостоятельно при каждом удалении перечитывали коллекцию.
Ответить с цитированием
Ответ



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

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


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