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
.
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()
.
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"
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.
An animation to play before the element is removed from the DOM.
The duration of the animation, in milliseconds.
The timing function that controls the animation's acceleration.
See MDN documentation for a list of pre-defined timing functions.
A callback that is run when any animations are finished and the element was removed from the DOM.