Как при нажатии на кнопку перемещать элемент в этот блок и удалять из предыдущего, при этом чтобы не было двух одинаковых элементов?

Question

[legatobrown]

<div class="block">
  <button>кнопка для блока 1</button>
  <span>Элемент, который должен будет перемещаться в блок где была нажата кнопка</span>
</div>

<div class="block">
  <button>кнопка для блока 2</button>
</div>

<div class="block">
  <button>кнопка для блока 3</button>
</div>

Comments

[WapSter]

Где песочница с попытками реализации?

Answer 1

[0xD34F]

О каких блоках и кнопках идёт речь, кого надо перемещать:

const blockSelector = '.block';
const buttonSelector = `${blockSelector} button`;
const el = document.querySelector(`${blockSelector} span`);

Слушать клики можно непосредственно на кнопках:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, ({ currentTarget: t }) => {
  while (!(t = t.parentNode).matches(blockSelector)) ;
  t.appendChild(el); // или t.insertBefore(el, null)
});

Или, на каком-нибудь из их общих предков:

document.addEventListener('click', e => e
  .target
  .closest(buttonSelector)
  ?.closest(blockSelector)
  .append(el) // или .insertAdjacentElement('beforeend', el)
);

Answer 2

[Stockholm Syndrome]

const span = document.querySelector('span'); 
document.querySelectorAll('button').forEach((btn) => btn.addEventListener('click', function() {
  this.parentNode.appendChild(span);
}));