Форум

repz · #1 (**permalink**) 18.05.2021, 12:43

Добрый день.
В продолжении темы.

Сделал аналог для input.

var elems = document.querySelectorAll('input[value=""]');
elems.forEach(option => option.closest('tr').remove());

В итоге, удаляется самый первый <tr> и удаляет весь контент, как можно этого избежать?

Можно ли по индексу например удалять все кроме 0 или как-то еще?

Спасибо.

repz · #2 (**permalink**) 18.05.2021, 13:38

А нельзя использовать .not(':eq(0)') для отбора?

нашел вот такую конструкцию:

Array.prototype.slice.call(document.querySelectorAll('input[value=""]'), 1)
    .forEach(elt => elt.parentNode.remove(elt))

Лучше, но все равно нужная часть удаляется)

Так. как class tr содержит tr_ , то решил вычленить по нему, в моем случае все отработало, как надо:

var elems = document.querySelectorAll('input[value=""]');
console.log(elems);
[].forEach.call(elems, function (el) {el.closest('[id*="tr_"]').remove();});

рони · #3 (**permalink**) 18.05.2021, 15:19

Сообщение от repz

Можно ли по индексу например удалять все кроме 0 или как-то еще?

elems.forEach((a, b) => b && a.closest('tr').remove());

repz · #4 (**permalink**) 18.05.2021, 16:20

Спасибо.

Не получается, closest ищет родителя родителя и получается, что все рано удаляет все содержимое.

<tr> - вот это удаляем по факту, а не должны
       <td>
                <div>
                  <table>
                   <tbody>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr id="tr_"> <- а должно вот это
		       <td></td>
		       <td>
	                <div>
		         <input type="text" value=""> - ищем вот это 
	                </div>
                       </td>
                     </tr>
                    </tbody>
                   </table>
                 </div>
        </td>
</tr>

ksa · #5 (**permalink**) 18.05.2021, 16:43

Сообщение от repz

все рано удаляет все содержимое

А что из примера должно удаляться?

repz · #6 (**permalink**) 18.05.2021, 16:47

Должен ближайший <tr> вверх удаляться, в данном примере <tr id="tr_">, но мб и не быть id.

Наверное надо пояснить - в песочнице работает так, как должно. Пытаюсь применить на локалке, удаляет, что не нужно.
Вроде поиск жесткий и все равно где-то, что-то не так.

рони · #7 (**permalink**) 18.05.2021, 18:35

Сообщение от repz

Не получается,

структуру надо сразу показывать ...
пробуйте

var elems = document.querySelectorAll('input[value=""]');
elems.forEach(input => input.closest('tr:last-child').remove());

repz · #8 (**permalink**) 19.05.2021, 10:41

В браузере вот такая ощибка.

Код:

Uncaught TypeError: Cannot read property 'remove' of null
    at <anonymous>:2:54
    at NodeList.forEach (<anonymous>)
    at <anonymous>:2:7

('tr:last-child') - вот тут проблема.

рони · #9 (**permalink**) 19.05.2021, 11:12

repz,
может у вас браузер устаревший или структура другая?
здесь код ниже работает?

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    td{
        border: 1px solid red;
    }

    </style>

</head>

<body>
<table><tr>
       <td> - вот это удаляем по факту, а не должны
                <div>
                  <table>
                   <tbody>
                    <tr><td>test</td></tr>
                    <tr><td>test</td></tr>
                    <tr><td>test</td></tr>
                    <tr id="tr_">
               <td>del <- а должно вот это  </td>
               <td>
                    <div>
                 <input type="text" value=""> - ищем вот это
                    </div>
                       </td>
                     </tr>
                    </tbody>
                   </table>
                 </div>
        </td>
</tr>
</table>
 <script>
var elems = document.querySelectorAll('input[value=""]');
elems.forEach(input => input.closest('tr:last-child').remove());

 </script>
</body>
</html>

repz · #10 (**permalink**) 19.05.2021, 11:43

Вот версия:

Код:

Последняя версия Google Chrome уже установлена
Версия 90.0.4430.212 (Официальная сборка), (64 бит)

Вот более точная разметка:
Удаляется 2 -ой tr.

<table>
	<tbody>
		<tr></tr>
		<tr>             <-Вот этот удаляется, а не хотелось бы.
			<td>
				<div>
					<form>
						<div>
							<div>
								<div>
									<div>
										<table>
											<tbody>
												<tr>
													<td></td>
													<td>
														<table>
															<tbody>
																<tr>
																	<td>
																		<input name="" value="" size="30" type="text"><br>
																	</td>
																</tr>
															</tbody>
														</table>
													</td>
												</tr>

												<tr>
													<td></td>
													<td>
														<select name="" size="1">
															<option value="" selected="">(нет)</option>
															<option value="">123</option>
														</select>
													</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</td>
		</tr>
	</tbody>
</table>

Форум

Справочник

Discord чат

Курсы javascript