Форум

repz · #1 (**permalink**) 07.03.2021, 20:53

Здравствуйте!
Есть достаточно сложная разметка для воспроизведения один в один, общий смысл такой:

<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>

больше нуля.

рони · #2 (**permalink**) 07.03.2021, 21:10

repz,

document.addEventListener( "DOMContentLoaded" , () => {
document.querySelectorAll("[content='myTarget']").forEach((span, i) => {
+span.textContent && (span = span.closest(".delete")) && span.remove()
} )
});

repz · #3 (**permalink**) 07.03.2021, 21:31

Профессор, код, я уверен рабочий, но у меня не заводится.
Пытаюсь сделать вот так, но что-то не выходит пока:

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>

рони · #4 (**permalink**) 07.03.2021, 22:02

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>

рони · #5 (**permalink**) 07.03.2021, 22:07

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>

repz · #6 (**permalink**) 07.03.2021, 23:34

рони,
здесь все работает, у меня нет(
делаю так:

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, но ничего не удаляет.

Если выполнить код в консоли, то отрабатывает норм.

рони · #7 (**permalink**) 08.03.2021, 00:06

repz,
элементов нет на странице

setTimeout(deleteTable, 1000)

задержку подберите сами

рони · #8 (**permalink**) 08.03.2021, 00:08

repz,
или так

window.addEventListener( "load" , () => {
document.querySelectorAll("[content='myTarget']").forEach((span, i) => {
+span.textContent && (span = span.closest(".delete")) && span.remove()
} )
});

repz · #9 (**permalink**) 08.03.2021, 00:27

рони,
Да, добавил setTimeout заработал))

Как всегда, огромное спасибо!

Форум

Справочник

Discord чат

Курсы javascript