как удалить все элементы с определенным innerHTML

#javascript #html #jquery

Вопрос:

 function checkIfBlank() {
  let li = document.getElementsByClassName("li");
  for (var i = 0; i < li.length; i  ) {
  if (li[i].innerHTML === "hello") {
    li[i].parentElement.remove();
  }
  }
}

 <li>
    <span class="li">hi</span>
</li>
<li>
    <span class="li">hi</span>
</li>
<li>
    <span class="li">hi</span>
</li>
<li>
    <span class="li">hello</span>
</li>
<li>
    <span class="li">hello</span>
</li>
<li>
    <span class="li">hello</span>
</li>

у меня есть эта функция, которая удалит родительский элемент промежутка, у которого есть внутренний текст «привет».

В этом случае я ожидаю, что код удалит все элементы с помощью innerHTML hello

но оказывается, что он удаляет только один элемент при выполнении функции

кто-нибудь может мне в этом помочь? я не очень хорош xD

Ответ №1:

Для таких целей его безопаснее использовать Array.from(element) .

 function checkIfBlank() {
    let li = document.getElementsByClassName("li");
    Array.from(li).forEach(function (li_curr) {
        if (li_curr.innerHTML == "hello") {
            li_curr.parentElement.remove();
        }
    });
}

checkIfBlank();

 <ul>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
</ul>

Решение jQuery:

 $('li:contains("hello")').remove();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hi</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
    <li>
        <span class="li">hello</span>
    </li>
</ul>

1. привет, спасибо за ответ, почему лучше использовать array.from?

2. @coder, Потому что это он предназначен для тех же задач, что и ваш. для {} цикл выполняет операцию n раз и может не попадать в интервал из n элементов. Я сам столкнулся с подобной проблемой. Но вы вполне можете использовать решение jquery, которое дал вам другой респондент. Кстати, этот ответ может быть сокращен как — $(‘.li:содержит(«привет»)’).родитель().удалить(); или $(‘li:содержит(«привет»)’).удалить();. Я указал на это в своем втором решении.

Ответ №2:

вы можете использовать jquery для удаления li с текстом соответствия, я надеюсь, вы получите свой ответ .

 $('li:contains("hello")')
 .next('span').remove().end()
 .remove();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<li>
    <span class="li">hi</span>
</li>
<li>
    <span class="li">hi</span>
</li>
<li>
    <span class="li">hi</span>
</li>
<li>
    <span class="li">hello</span>
</li>
<li>
    <span class="li">hello</span>
</li>
<li>
    <span class="li">hello</span>
</li>

наслаждайтесь моим кодом 😉

Ответ №3:

Вы уверены, что нет ни одного, который выглядел бы так:

 <span class="li">
    Hello
</span>

Вместо этого:

 <span class="li">Hello</span>

Первое, что мне пришло в голову, было то, что если есть какой-либо разрыв строки или пробел, то вам определенно нужно будет запустить .trim() в этой строке innerHTML. Однако, если это не так, я бы предложил кучу console.log () в определенных местах, чтобы посмотреть, как далеко он заходит в цикле for.