Как найти и убрать в JS vanila

Question

В JS я пытаюсь найти в li нужный тег автора data-author, и когда они одинаковы с idUser, то убираем кнопку #btn. Чет то у меня не получается.

<span id="idUser" data-iduser="2"></span>

<ul>
  <li class="author author_id1" data-author="1" data-id="1">...</li>
    <li class="author author_id2" data-author="2" data-id="2">...</li>
    <li class="author author_id3" data-author="3" data-id="3">...</li>
</ul>

<button id="btn">Button</button>

const idUser = document.getElementById("idUser").dataset.iduser
const author = document.querySelectorAll('li').dataset.author
if (idUser === author) { 
    document.getElementById('btn').remove()
}

Как все это правильно дописать?

Answer 1

document.querySelectorAll('li') возвращает коллекцию элементов, у неё нет свойства .dataset.author. Чтобы проверить, содержит ли какой-то элемент из этой коллекции свойство .dataset.author, совпадающее с idUser, можно превратить коллекцию в массив и воспользоваться методом Array.prototype.some().

const idUser = document.getElementById("idUser").dataset.iduser
const authors = [...document.querySelectorAll('li')]

if (authors.some(author => author.dataset.author === idUser)) { 
    document.getElementById('btn').remove()
}

<span id="idUser" data-iduser="2"></span>

<ul>
  <li class="author author_id1" data-author="1" data-id="1">...</li>
    <li class="author author_id2" data-author="2" data-id="2">...</li>
    <li class="author author_id3" data-author="3" data-id="3">...</li>
</ul>

<button id="btn">Button</button>

БЛОГ НА HUSL

Как найти и убрать в JS vanila

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