up.fragment up.destroy(element, [options])

JavaScript function

Destroys the given element or selector.

All registered destructors are called. The element is then removed from the DOM.

Unfinished requests targeting the destroyed fragment or its descendants are aborted.

Emits the event up:fragment:destroyed.

Animating the removal

You may animate the element's removal by passing an option like { animation: 'fade-out' }. Unpoly ships with a number of predefined animations and you may so define custom animations.

If the element's removal is animated, the element will remain in the DOM until after the animation has completed. While the animation is running the element will be given the .up-destroying class. The element will also be given the [inert] attribute to prevent interaction and to hide its content from assistive technologies.

To prevent accidental selection of destroying elements, they are ignored by Unpoly features like [up-target] or up.fragment.get().

Running code after removal

Destroying an element without animation works synchronously:

console.log(element.isConnected) // logs "true"

up.destroy(element) // no need to await

console.log(element.isConnected) // logs "false"

When the removal is animated, it remains attached while the exit animation plays. To run code after the element was detached from the DOM, pass an { onFinished } callback:

console.log(element.isConnected) // logs "true"

up.destroy(element, {
  animation: 'fade-out',
  duration: 500,
  onFinished() { console.log(element.isConnected) }
})

console.log(element.isConnected) // logs "true"

// After 500 ms the { onFinished } callback logs "false"

Detecting destructor errors

If a destructor throws an error, up.destroy() will still remove the element and not throw an error.

Instead compiler errors will print to the error console and emit an error event on window.

See errors in user code for details.