Как скрыть последний элемент при клике на кнопку?

Question

Мне нужен скрипт который бы скрывал последний элемент при клике на кнопку на чистом JS.

Попробовал следующий вариантconsole.log(corner_td) выводит в консоль undefined, видимо проблема в определении последнего элемента.

Подскажите, как переделать код, чтобы все работало?

document.addEventListener('DOMContentLoaded', function() { 
   var tr = document.getElementsByClassName("td_newsfedd");
   var btn = document.getElementsByClassName("td_ajax_load_more");
   var corner_td = tr.lastChild;
   console.log(tr);
   console.log(corner_td);
   btn.onclick = function() {
   corner_td.style.display = "none";           
   };
});

Answer 1

Что бы выбрать последний элемент из коллекции NodeList можно воспользоваться конструкцией tr[tr.length - 1]:

document.addEventListener("DOMContentLoaded", () => {
  const tr = document.querySelectorAll(".td_newsfedd")
  const btn = document.querySelector(".td_ajax_load_more")
  btn.onclick = function() {
    tr[tr.length - 1].style.display = "none"
  }
})

<div class="td_newsfedd">First</div>
<div class="td_newsfedd">Second</div>
<div class="td_newsfedd">Last</div>

<button class="td_ajax_load_more">Hide Last</button>

БЛОГ НА HUSL

Как скрыть последний элемент при клике на кнопку?

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