Удалить divы по условию в span.
Здравствуйте!
Есть достаточно сложная разметка для воспроизведения один в один, общий смысл такой:
<div class="delete">
<table>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td >
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<div>Target blank</div>
</td>
<td>
<div>
<span content="myTarget">0</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div class="delete">- Может быть неопределенное количество. Помогите удалить все дивы delete, если <span content="myTarget">0</span>больше нуля. |
repz,
document.addEventListener( "DOMContentLoaded" , () => {
document.querySelectorAll("[content='myTarget']").forEach((span, i) => {
+span.textContent && (span = span.closest(".delete")) && span.remove()
} )
});
|
Профессор, код, я уверен рабочий, но у меня не заводится.
Пытаюсь сделать вот так, но что-то не выходит пока:
let block_array = document.querySelectorAll(".delete");
for (let i = 0; i < block_array.length; i++) {
let child = block_array[i].querySelector("[content='myTarget']");
let value = +child.innerHTML;
console.log(value);
if (value > 0) {
block_array[i].innerHTML='';
}
Удаляет все div=remove Добавил console.log(child); в него приходит <span content="myTarget">0</span> |
repz,
здесь работает?если нет то какой браузер
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener( "DOMContentLoaded" , () => {
document.querySelectorAll("[content='myTarget']").forEach((span, i) => {
+span.textContent && (span = span.closest(".delete")) && span.remove()
} )
});
</script>
</head>
<body>
<div class="delete">
<table>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td >
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<div>Target blank</div>
</td>
<td>
<div>
<span content="myTarget">0</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div class="delete">
<table>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td >
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<div>Target blank</div>
</td>
<td>
<div>
<span content="myTarget">10</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
repz,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener( "DOMContentLoaded" , () => {
let block_array = document.querySelectorAll(".delete");
for (let i = 0; i < block_array.length; i++) {
let child = block_array[i].querySelector("[content='myTarget']");
let value = +child.textContent;
console.log(value);
if (value > 0) {
block_array[i].parentNode.removeChild(block_array[i]);
}
}
});
</script>
</head>
<body>
<div class="delete">
<table>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td >
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<div>Target blank</div>
</td>
<td>
<div>
<span content="myTarget">0</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div class="delete">
<table>
<tbody>
<tr>
<td>
</td>
<td>
</td>
<td>
<table>
<tbody>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td >
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<div>Target blank</div>
</td>
<td>
<div>
<span content="myTarget">10</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
|
рони,
здесь все работает, у меня нет( делаю так:
function deleteTable() {
document.addEventListener( "DOMContentLoaded" , () => {
let block_array = document.querySelectorAll(".delete");
for (let i = 0; i < block_array.length; i++) {
let child = block_array[i].querySelector("[content='myTarget']");
let value = +child.textContent;
console.log(value);
if (value > 0) {
block_array[i].parentNode.removeChild(block_array[i]);
}
}
});
}
function funcDelete() {
deleteTable();
}
funcDelete()
Цепляю как расширение к chrome. При таком коде в консоль не прилетает console.log(value); Если:
function deleteTable() {
let block_array = document.querySelectorAll(".delete");
for (let i = 0; i < block_array.length; i++) {
let child = block_array[i].querySelector("[content='myTarget']");
let value = +child.textContent;
console.log(value);
if (value > 0) {
block_array[i].parentNode.removeChild(block_array[i]);
}
}
}
function funcDelete() {
deleteTable();
}
funcDelete()
то в консоль прилетает 0, но ничего не удаляет. Если выполнить код в консоли, то отрабатывает норм. |
repz,
элементов нет на странице setTimeout(deleteTable, 1000)задержку подберите сами |
repz,
или так
window.addEventListener( "load" , () => {
document.querySelectorAll("[content='myTarget']").forEach((span, i) => {
+span.textContent && (span = span.closest(".delete")) && span.remove()
} )
});
|
рони,
Да, добавил setTimeout заработал)) Как всегда, огромное спасибо! |
| Часовой пояс GMT +3, время: 13:02. |