Удалить пункт списка, с самым большим числом в списке

Question

Дана кнопка и список ul, заполненный числами. По клику на кнопку удалите пункт списка, содержащий самое максимальное число.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <button>press me</button>
  <ul>
    <li>112</li>
    <li>222</li>
    <li>311</li>
  </ul>
  <script>
    let ul = document.querySelector("ul");
    document.querySelector("button").addEventListener("click", function() {
      let re = []; //Массив для всех значений тега li
      let max = 0; // Начальное значение для максимального числа
      let lis = [...document.querySelectorAll("li")]; //получаю массив всех li
      for (const li of lis) {
        re.push(parseFloat(li.textContent)); //добавляю в массив значения
        max = Math.max(...re); // получаю максимальное значение из списка, а дальше всё) 
      }
    });
  </script>
</body>

</html>

Answer 1

удалите пункт списка, содержащий самое максимальное число

let lis = [...document.querySelectorAll("li")]; // Массив всех элементов li
найти в цикле lis.reduce((maxLi, li) и maxLi.remove(); // Удаление элемента
если пустой массив, то ничего не делаем if (lis.length === 0) return;

   document.querySelector("button").addEventListener("click", function () {
    let lis = [...document.querySelectorAll("li")]; // Массив всех элементов li
    if (lis.length === 0) return; // Если список пустой, ничего не делаем

    // Поиск элемента с максимальным значением
    let maxLi = lis.reduce((maxLi, li) => 
      parseFloat(li.textContent) > parseFloat(maxLi.textContent) ? li : maxLi
    );
    maxLi.remove(); // Удаление элемента
  });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <button>press me</button>
  <ul>
    <li>112</li>
    <li>222</li>
    <li>311</li>
  </ul>

</body>

</html>

Ваши первоначальные шаги и ошибки

В первоначальном коде вы добавляли числовые значения элементов списка в отдельный массив re. Это лишний шаг, потому что нам не нужно сохранять все числа отдельно — мы можем сразу найти элемент с максимальным значением, используя метод reduce , который выполняет это за нас

Находить максимальное число с помощью Math.max(...re),правильно!!! Но!!! это число (например, 311) — это всего лишь значение. У вас нет ссылки на элемент списка <li>, который содержит это значение, поэтому вы не можете удалить конкретный элемент. Код находит максимальное число, но не знает, какой именно элемент удалить

Ну и отсутвие удаления...

reduce принимает два аргумента - maxLi — это элемент, содержащий максимальное число и текущий элемент li.

Мы сравниваем числа, содержащиеся в каждом элементе <li>, и если текущее число больше, чем число в maxLi, то обновляем его на этот элемент.

В результате в переменной maxLi хранится сам элемент <li>, который собственно и содержит максимальное число

for...of и комментарии...

let ul = document.querySelector("ul");
document.querySelector("button").addEventListener("click", function() {
  let maxValue = -Infinity; // Инициализируем минимальным значением
  /*
  нужно для того, чтобы быть уверенным, что любое значение в списке будет корректно обработано и при первом же сравнении заменит начальное значение
  пример: Если начальное значение maxValue = -Infinity, то первое число 112 будет больше -Infinity, и оно станет новым максимальным значением
  */
  let maxLi = 0; // Начальное значение для максимального числа
  let lis = [...ul.querySelectorAll("li")]; // Получаем массив всех li

  // Используем цикл for...of для поиска максимального значения
  for (const li of lis) {
    let value = parseFloat(li.textContent); // Преобразуем текст в число
    // Math.max нам вернет число, а не эллемент массива, поэтому этот шаг нам не нужен
    if (value > maxValue) {
      maxValue = value;
      maxLi = li; // Сохраняем элемент с максимальным значением
    }
  }

  if (maxLi) {
    maxLi.remove(); // Удаляем элемент с максимальным значением
  }
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <button>press me</button>
  <ul>
    <li>112</li>
    <li>222</li>
    <li>311</li>
  </ul>

</body>

</html>

Answer 2

Можно так.

const ul = document.querySelector("ul");
document.querySelector("button").addEventListener("click", function () {
  let items = ul.querySelectorAll("li"); // Обновляем список элементов
  let maxIndex = -1; 
  let maxValue = Number.NEGATIVE_INFINITY; // Инициализируем минимальным числом

  items.forEach(function (item, index) {
    let value = +item.textContent; // Преобразуем текст в число
    if (value > maxValue) {
      maxValue = value;
      maxIndex = index;
    }
  });

  console.log("maxValue =", maxValue, " maxIndex =", maxIndex);

  if (maxIndex !== -1) { /// Делаем проверку что у нас есть что удалять
    items[maxIndex].remove(); // Удаляем элемент с максимальным значением
  }
});

<button>press me</button>
<ul>
  <li>112</li>
  <li>222</li>
  <li>311</li>
  <li>999 Tru la la</li>
</ul>

Тут проверочки, что у нас там точно число, что есть что удалять, ну и оно будет удалять каждый раз самое большое значение. Решение не настолько минималистично как через reduce но за то учитываете, что если в строке не число, то ёё удалять не надо.

БЛОГ НА HUSL

Удалить пункт списка, с самым большим числом в списке

Ответы (2 шт):