Добраться до tr из input и не потерять все)
Добрый день.
В продолжении темы. Сделал аналог для input.
var elems = document.querySelectorAll('input[value=""]');
elems.forEach(option => option.closest('tr').remove());
В итоге, удаляется самый первый <tr> и удаляет весь контент, как можно этого избежать? Можно ли по индексу например удалять все кроме 0 или как-то еще? Спасибо. |
А нельзя использовать .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();});
|
Цитата:
|
Спасибо.
Не получается, 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>
|
Цитата:
|
Должен ближайший <tr> вверх удаляться, в данном примере <tr id="tr_">, но мб и не быть id.
Наверное надо пояснить - в песочнице работает так, как должно. Пытаюсь применить на локалке, удаляет, что не нужно. Вроде поиск жесткий и все равно где-то, что-то не так. |
Цитата:
пробуйте
var elems = document.querySelectorAll('input[value=""]');
elems.forEach(input => input.closest('tr:last-child').remove());
|
В браузере вот такая ощибка.
Код:
Uncaught TypeError: Cannot read property 'remove' of null |
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>
|
Вот версия:
Код:
Последняя версия Google Chrome уже установленаУдаляется 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> |
repz,
вы что-то не договариваите ... сделана задержка удаления для наглядности
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test td{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tbody>
<tr></tr>
<tr>
<td> <-Вот этот удаляется, а не хотелось бы.
<div>
<form>
<div>
<div>
<div>
<div>
<table>
<tbody>
<tr>
<td></td>
<td>
<table>
<tbody>
<tr class="test">
<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>
<script>
var elems = document.querySelectorAll('input[value=""]');
window.setTimeout(_ => elems.forEach(input => input.closest('tr:last-child').remove()), 3000);
</script>
</body>
</html>
|
) Честно, я вижу, что код работает и работает на jsf..., запускаю в браузере последний код там ошибка, если его же без "last-child", то удаляет <TR> второй в разметке и вместе с ним все.
Искал может есть какие-то input скрытые с value="" - не нашел.  |
repz,
может в структуре html ошибки? а так?
var elems = document.querySelectorAll('tr input[value=""]');
elems.forEach(input => input.closest('tr:last-child').remove());
|
Да, вроде нет и в отбор попадает то. что нужно удалить.
Но по факту почему-то сносится еще и нужный <tr>. Вот прогнал на соответствие и нет это <tr> в найденом, а почему сносит не знаю.  Вот структура так если бы все было на месте: <table> <tbody> <tr></tr> <tr> <-Вот этот удаляется, а не хотелось бы. <td> <div> <form> <div> <div> <div> <div> <table> <tbody> <tr> <td></td> <td> <table> <tbody> <tr> <td> <tr id="tr_ACTIVE_FROM"> <td></td> <td> <div> <input type="text" name="ACTIVE_FROM" size="22" value=""> <span></span> </div></td> </tr> <tr id="tr_ACTIVE_TO"> <td></td> <td> <div> <input type="text" name="ACTIVE_TO" size="22" value=""> <span ></span> </div></td> </tr> </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> |
repz,
код пробовали из #13? |
Да, он не заводится, как и предыдущий.
  |
repz,
могу только гадать, что у вас и как ... |
Да все стандартно, вот еще заметил забавный глюк:
 То есть если
console.log(el.closest('[id*="tr_PROPERTY_"]'))
то ловит все как надо, а если
el.closest('[id*="tr_PROPERTY_"]').remove()
то ошибка и не выполняется |
Не стал редактировать предыдущее.
Ругается на remove значит не может найти что удалить, т.е. в предыдущем underfined. И вот что нашел:  после выполнения
var elems = document.querySelectorAll('input[value=""]');if (elems.length > 0) {
[].forEach.call(elems, function (el) {console.log(el.closest('[id*="tr_PROPERTY_"]'))
});}
Может это как-то поможет. И еще вопрос, откуда там null вообще? |
Цитата:
|
repz,
var elems = document.querySelectorAll('tr input[value=""]');
elems.forEach(input => input.closest('tr:last-child') && input.closest('tr:last-child').parentNode && input.closest('tr:last-child').remove());
|
Да, так удаляются, но не все, например:
<tr id="tr_ACTIVE_FROM">
<td>
<div>
<input type="text" name="ACTIVE_FROM" size="22" value="">
<span></span>
</div></td>
</tr>
Вот этот вообще не удаляется, а те что удалились имели структуру <tr id="tr_PROPERTY"> <td></td> <td> ----------вот до этого места <table > <tbody> <tr> <td> <input value="" size="30" type="text"> <br> </td> </tr> </tbody> </table> </td> </tr> |
repz,
)))
var elems = document.querySelectorAll('tr>td>input[value=""]');
elems.forEach(input => {
var tr = input.parentNode.parentNode;
if(tr.tagName == 'TR' && tr.parentNode) tr.parentNode.removeChild(tr)
});
|
repz,
ок будем ползти циклом до tr ... |
рони,
Да. удалилось еще больше input, осталось правда этих два:
<tr id="tr_ACTIVE_FROM">
<td></td>
<td>
<div>
<input type="text" name="ACTIVE_FROM" size="22" value="">
<span></span>
</div></td>
</tr>
<tr id="tr_ACTIVE_TO">
<td></td>
<td>
<div>
<input type="text" name="ACTIVE_TO" size="22" value="">
<span ></span>
</div></td>
</tr>
А так все по прежнему, всмысле, все уже не удаляется, но и полностью строка тоже. |
repz,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.test td {
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tbody>
<tr id="tr_ACTIVE_FROM">
<td>
<div>
<input type="text" name="ACTIVE_FROM" size="22" value="">
<span></span>
</div>
</td>
</tr>
<tr id="tr_PROPERTY">
<td></td>
<td> ----------вот до этого места
<table>
<tbody>
<tr>
<td>
<input value="" size="30" type="text">
<br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script>
var elems = document.querySelectorAll('input[value=""]');
elems.forEach(input => {
while (input = input.parentNode) {
if (input.tagName == 'TR' && input.parentNode) {
input.parentNode.removeChild(input);
break;
}
}
});
</script>
</body>
</html>
|
рони,
В общем экспериментировал пол ночи, на чистом выдернутом html все , как часы работает. В составе работающего сайта удаляется тот самый <TR>. Думаю, дальше нет смысла тыкаться наугад, попробую разобрать все скрипты, что есть на сайте, мб один из них, что-то проверяет и потом удаляет. Ручное удаление через консоль <tr> - не приводит к автоудалению первого tr. Спасибо огромное за помощь. |
Пришла мысль, заметил, что после выполнения:
var elems = document.querySelectorAll('tr>td>input[value=""]');
elems.forEach(input => {
var tr = input.parentNode.parentNode;
if(tr.tagName == 'TR' && tr.parentNode) tr.parentNode.removeChild(tr)
});
Остается:
<tr>--------------------удалить вот это, если
<td></td>
<td>
<table>
<tbody>---------вот тут ничего нет
</tbody>
</table>
</td>
</tr>
Мб имеет смысл в два этапа, первый, что выше и второй найти все пустые <tbody> -? добраться до tr и удалить его. Что-то типа
var elems = document.querySelectorAll('table>tbody').length == 0;
[].forEach.call(elems, function (el) {console.log("find");
});
|
repz,
#26 пробовали? |
рони,
Конечно, тоже все сносит. |
var elems = document.querySelectorAll('table>tbody');
[].forEach.call(elems, function (el) {
if (el.childNodes.length === 0) {
console.log(el.textContent);
console.log("//////////////////////////////////////");
}
});
Вот так не находит, подскажите, где ошибся? |
Сделал так:
var elems = document.querySelectorAll('table>tbody');
[].forEach.call(elems, function (el) {
if (el.textContent=='') {
el.closest('tr').remove(); }
});
|
repz,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const trs = document.querySelectorAll('tr');
trs.forEach(function(tr) {
const elems = [...tr.querySelectorAll('*')];
const empty = elems.every(({textContent}) => !textContent.trim())
empty && tr.remove()
});
});
</script>
</head>
<body>
<table>
<tr>
<td></td>
<td>
<table>
<tbody>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
|
рони,
Удаляются все инпуты, даже заполненные, а вот пустые tbody остаются. |
| Часовой пояс GMT +3, время: 17:43. |