How do I remove an entity or element from the scene in A-Frame?

Question

I am building a component that watches (in tick) the position of its entity, and when some condition is met, it removes the entity from the scene. How can I do the removing part?

For example:

AFRAME.registerComponent('remove-on-tick', {
  tick: function () {
    if (condition) {
      // Remove entity.
    }
  }
});

Answer 1

Removing an entity is the same as in DOM:

entityEl.parentNode.removeChild(entityEl);

If you have a sphere:

var sphere = document.querySelector('a-sphere');
sphere.parentNode.removeChild(sphere);

In a component, we have a reference to the entity via this.el:

AFRAME.registerComponent('remove-on-tick', {
  tick: function () {
    var entity = this.el;
    if (condition) {
      entity.parentNode.removeChild(entity);
    }
  }
});