Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   DOM удаление дочернего элемента (https://javascript.ru/forum/events/60507-dom-udalenie-dochernego-ehlementa.html)

javaphp 04.01.2016 12:35

DOM удаление дочернего элемента
 
Подскажите, как в таблице <table> удалить последний дочерний элемент <tr>, со всеми входящими в него <tr>. Как здесь правильно использовать removeChild()? или как нибудь по другому :help:

рони 04.01.2016 12:52

удаление строк в таблице
 
javaphp,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<script>
   var tbody = document.querySelector('tbody');
       tbody.deleteRow(-1)
</script>
</body>

</html>

рони 04.01.2016 12:55

удаление строк в таблице
 
javaphp,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<script>
   var tbody = document.querySelector('tbody');
       tbody.removeChild(tbody.lastElementChild)
</script>
</body>

</html>

javaphp 04.01.2016 12:57

Понял, спасибо. Я просто в querySelector писал 'table'.

javaphp 04.01.2016 12:58

А как правильно удалить с каждой tr последнюю дочернюю td?

рони 04.01.2016 13:14

удаление ячеек в таблице
 
javaphp, а подумать? или погуглить?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<script>
  [].forEach.call( document.querySelectorAll('tr'), function(tr,i) {
     tr.deleteCell(-1)
});
</script>
</body>

</html>

рони 04.01.2016 13:16

удаление ячеек в таблице
 
javaphp,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 </head>

<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
<script>
  [].forEach.call( document.querySelectorAll('tr td:last-child'), function(td,i) {
     var parent = td.parentNode;
     parent.removeChild(td);

});
</script>
</body>

</html>

javaphp 04.01.2016 13:21

Да пытался найти, но все что пробовал как-то удаляет не правильно. Подскажите что делает это выражение [].forEach.call? это цикл? Спасибо за помощь!

рони 04.01.2016 13:34

javaphp,
да цикл
https://learn.javascript.ru/array-iteration
https://learn.javascript.ru/traversi...массивы

javaphp 04.01.2016 13:38

Спасибо!


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