Как удалить (трансформировать - перевести) элемент по клику?

Question

HTML:

<div class="circle"></div>

CSS:

.circle {
  width: 30px; height: 30px;
  background: #fc4;
  display: block;
  border-radius: 30px;
  transform: translateX(0);
  transform-origin: center;
  transition: .1s ease-in-out;
}

JS: (я хочу удалить анимацию круга при щелчке в любом месте документа)

let circle = document.querySelector('.circle');

function comeWithMe(e) {
  let xPosition = e.clientX - 40;
  let yPosition = e.clientY - 180;

  circle.style.transform = `translateX(${xPosition}px) translateY(${yPosition}px)`;
}


window.onmousemove = comeWithMe;

Answer 1

Это вернет его к началу координат. Я думаю это то, что вы хотели.

let circle = document.querySelector('.circle');
let move = true;

function comeWithMe(e) {
  let xPosition = move ? e.clientX - 10 : 0;
  let yPosition = move ? e.clientY - 10 : 0;

  circle.style.transform = `translateX(${xPosition}px) translateY(${yPosition}px)`;
}

window.onmousemove = comeWithMe;
window.onclick = function(e) {
  move = !move;
  comeWithMe(e);
}

.circle {
  width: 30px;
  height: 30px;
  background: #fc4;
  display: block;
  border-radius: 30px;
  transform: translateX(0);
  transform-origin: center;
  transition: .1s ease-in-out;
}

<div class="circle"></div>

Answer 2

Это завершит анимацию, если вы щелкнете в любом месте документа. onclick Я удаляю событие mousemove.

let circle = document.querySelector('.circle');

function comeWithMe(e) {
  let xPosition = e.clientX - 40;
  let yPosition = e.clientY - 40;
  circle.style.transform = `translateX(${xPosition}px) translateY(${yPosition}px)`;
}
window.addEventListener("click", function(event) {
  window.removeEventListener("mousemove", comeWithMe);
});
window.addEventListener("mousemove", comeWithMe);

.circle {
  width: 30px;
  height: 30px;
  background: #fc4;
  display: block;
  border-radius: 30px;
  transform: translateX(0);
  transform-origin: center;
  transition: .1s ease-in-out;
}

<div class="circle"></div>

Answer 3

вы можете использовать setAttribute или removeAttribute

removeAttribute

SetAttribute

document.getElementById('para').addEventListener('click', function() {
  document.getElementById('para').setAttribute('style', 'display:none');
});

document.getElementById('para2').addEventListener('click', function() {
  document.getElementById('para2').removeAttribute('style', 'color');
});

<p id='para'>clickme</p>
<p id='para2' style='color:red'>clickme too</p>