Как при нажатии на кнопку из ul удалить li с максимальным значением?

Question

[Артур Алекс]

<button id="btn">Click me</button> <br>
<ul id="ul">
<li>25</li>
<li>2</li>
<li>7</li>
<li>8</li>
<li>3</li>
</ul>

let btn = document.querySelector("#btn");
let lis = document.querySelectorAll("li");
let ul = document.querySelector("#ul");

btn.addEventListener('click', () => {
    let arr = [];
    let item;
    for (let li of lis) {
        arr.push(+li.textContent);
        item = Math.max.apply(null, arr);
        console.log(item);
        if (+li.textContent === item) {
            li.remove();
        }
    }

    arr = arr.filter(e => {
        if (e === Math.max.apply(null, arr)) {
            return false;
        } else {
            return true;
        }
    })
    console.log(arr);
})

Удаление происходит только один раз. При повторном нажатии на кнопку максимальным числом выскакивает число удалённого li. Как исправить?

Answer 1

[0xD34F]

При повторном нажатии на кнопку максимальным числом выскакивает число удалённого li.

Как и должно быть. Кто вам обещал, что вызов метода remove приведёт к исчезновению элемента из lis? Искать максимальный элемент следует среди тех, что всё ещё присутствуют на странице, а не тех, что были изначально - то есть, или надо получать элементы непосредственно перед поиском, или коллекция элементов должна быть динамической.

Сам поиск максимального элемента - это какая-то шизофрения, какого чёрта вы удаляете элементы до того, как будут проверены значения всех (т.е., до того, как убедитесь, что тот, который собираетесь удалить, действительно максимальный - попробуйте сделать максимальный не первым, и посмотрите, что получится)? При переборе коллекции надо запоминать максимальный элемент, сравнивать с текущим, если текущий больше, обновлять максимум.

function max(data, key = n => n) {
  const getVal = key instanceof Function ? key : n => n[key];
  let result = null;

  for (const n of data) {
    const val = getVal(n);
    if (!result || result[1] < val) {
      result = [ n, val ];
    }
  }

  return result?.[0];
}


document.querySelector('button').addEventListener('click', function(e) {
  max(this, n => +n.textContent)?.remove();
  e.target.disabled = !this.length;
}.bind(document.querySelector('ul').children));

Comments

[Артур Алекс]

Благодарю. Работает.

[Сергей delphinpro]

Артур Алекс, в следующий раз попробуйте почитать документацию. Там чётко написано вот это:

https://developer.mozilla.org/en-US/docs/Web/API/D...

Return value
A non-live NodeList containing one Element object for each element that matches at least one of the specified selectors or an empty NodeList in case of no matches.

Важный аспект - A non-live!

Прочитали, сохранили в переменную, что-то изменили в DOM - в переменной ничего не изменится.