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

Question

[legatobrown]

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

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

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

Comments

[WapSter]

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

Answer 1

[0xD34F]

const blockSelector = '.block';
const buttonSelector = `${blockSelector} button`;
const itemSelector = `${blockSelector} span`;

Делегирование, назначаем обработчик клика один раз для всех кнопок:

document.addEventListener('click', e => e
  .target
  .closest(buttonSelector)
  ?.closest(blockSelector)
  ?.append(document.querySelector(itemSelector))
);

Или, назначаем обработчик клика каждой кнопке индивидуально:

const item = document.querySelector(itemSelector);
const onClick = e => e.currentTarget.closest(blockSelector).appendChild(item);
document.querySelectorAll(buttonSelector).forEach(n => n.addEventListener('click', onClick));

Answer 2

[Stockholm Syndrome]

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

Answer 3

[Алексей Козин]

Я лично бы делал так )
https://codesandbox.io/s/romantic-jackson-u4lql

Готов ответить на вопросы