Как по клику вывести именно те id, которые были кликнуты?

Question

[Andy Koshman]

Всем привет, в задаче имеется родительский блок <div class="parent-block">...</div> имеющий в себе определенное количество дочерних блоков<div class="child-block">...</div>в свою очередь в каждом дочернем блоке находятся item с id. Задача заключается в том, что мне нужно получить только "кликнутые" id определенного родительского блока, например в первом блоке кликнул по кнопкам 1, 3, 5 должно вывести в консоль 1, 3 , 5, после во втором выбираем 2, 4 и выводится 2 и 4. Кнопка add all id собирает айдишки только со своего child-block. Я так полагаю, что это можно реализовать с помощью filter или же map, но не понимаю как выводить что то типа e.target.id, пока выводятся все имеющиеся id. Кнопки при клике закрасил просто для наглядности.

https://jsfiddle.net/j0zyusg8/2/

<div class="parent-block">
  <div class="child-block">
    <div class="item">
      <span class="elem" id="1">1</span>
      <button class="btn">id</button>
    </div>
    <div class="item">
      <span class="elem" id="2">2</span>
      <button class="btn">id</button>
    </div>
    <div class="item">
      <span class="elem" id="3">3</span>
      <button class="btn">id</button>
    </div>
    <div class="item">
      <span class="elem" id="4">4</span>
      <button class="btn">id</button>
    </div>
    <div class="item">
      <span class="elem" id="5">5</span>
      <button class="btn">id</button>
    </div>
    <button class="btn-all">add all id</button>
  </div>
  <div class="child-block">
    <div class="item">
      <span class="elem" id="1">1</span>
      <button class="btn">id</button>
    </div>
    <div class="item">
      <span class="elem" id="2">2</span>
      <button class="btn">id</button>
    </div>
    <div class="item">
      <span class="elem" id="3">3</span>
      <button class="btn">id</button>
    </div>
    <div class="item">
      <span class="elem" id="4">4</span>
      <button class="btn">id</button>
    </div>
    <div class="item">
      <span class="elem" id="5">5</span>
      <button class="btn">id</button>
    </div>
    <button class="btn-all">add all id</button>
  </div>
</div>

let elem = document.querySelectorAll('.elem')
let parentBlock = document.querySelector('.parent-block')
let item = document.querySelector('.item')
parentBlock.addEventListener('click', function(e) {
  if (e.target.classList.contains('btn-all')) {
    [...elem].map(item => console.log(item.id))
  }
  if (e.target.classList.contains('btn')) {
    e.target.style.background = 'red';
  }
})

Comments

[ThunderCat]

начнем с того что id должен быть уникальным в документе, а у вас они бодренько дублируются.
Так же не понятно в чем задача, просто вывести айди кликнутого элемента?

[Andy Koshman]

ThunderCat, По поводу id я уже спрашивал у backend разработчика и даже прилагаю доказательство того что все мы всё понимаем, но обстоятельства решают за нас.

Да, задача заключается в том чтобы просто вывести кликнутые id по кнопке add all id. Мне их потом нужно будет передавать на backend, например пользователь кликнул на 1 (сохраняем в уме id="1") нажал add all id и я получил данный id.

[ThunderCat]

Andy Koshman,

но обстоятельства решают за нас.

то что на бэкенд надо передать айди, не значит что элемент должен иметь этот айди, для таких случаев есть другие инструменты, например дата атрибуты. Не надо привязываться к "похожести" свойств объекта бэкенда и атрибутов хтмл, у них совершенно разный функционал.

Мне их потом нужно будет передавать на backend, например пользователь кликнул на 1 (сохраняем в уме id="1") нажал add all id и я получил данный id.

Ок, так больше похоже на внятное описание, но вопросов все равно пока больше чем понимания. Допустим я нажал в первой группе 2, затем нажал во второй группе 1, а затем нажал add all id от первой группы, что должно получиться?

[Andy Koshman]

ThunderCat, Спасибо за информацию по поводу data-id, действительно я не догадался что тут семантически правильно именно дата атрибуты использовать, переделаю.
По поводу клика по группам, по какой группе пользователь кликнул add all id, такая и собирает id своей группы в не зависимости от соседней группы.
То есть можно в обеих группах кликнуть по id, но выведутся только те, которые грубо говоря привязаны к своему add all id

[ThunderCat]

Andy Koshman, в таком случае вам нужно как-то идентифицировать группы, я так понимаю что это группы которые тоже как-то должны отображаться в запросе, типа номер каюты и номер места в каюте...

[Andy Koshman]

ThunderCat, Да кстати я потерял id child-block. У каждого child-block свой id имеется.

Answer 1

[Noder SS]

С айди у вас не получится, ведь это индивидуально для элемента. Если надо, могу сверстать тему с классами

Comments

[Andy Koshman]

Мне уже помогли на stackoverflow, с помощью данного кода работает как задумывалось:

const childBlock = document.querySelectorAll('.child-block')
const item = document.querySelectorAll('.item');

item.forEach( function(e){
  e.addEventListener('click', function(){
    this.classList.toggle('clicked');
  });
});

childBlock.forEach( (a) => {

  a.addEventListener('click', function(e) {
    if (e.target.classList.contains('btn-all')) {

      const thisChildren = this.querySelectorAll('.clicked');
      thisChildren.forEach( (el) => {
         console.log(el.querySelector('.elem').dataset.id);
      });
    }
  })
});