---
name: "up.destroy"
area: "API"
kind: "JavaScript function"
parent: "up.fragment module"
url: "https://unpoly.com/api/up.destroy"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.fragment module](https://unpoly.com/api/up.fragment.md)</nav>

# up.destroy(element, [options])

Destroys the given element or selector.

All registered [destructors](https://unpoly.com/learn/enhancing-elements.md#destructor) are called. The element is then removed from the DOM.

Unfinished requests targeting the destroyed fragment or its descendants are [aborted](https://unpoly.com/learn/aborting-requests.md).

Emits the event [`up:fragment:destroyed`](https://unpoly.com/api/up:fragment:destroyed.md).

<nav aria-label="Contents">

#### Contents

- [Animating the removal](#animating-the-removal)
- [Running code after removal](#running-code-after-removal)
- [Detecting destructor errors](#detecting-destructor-errors)
- [Parameters](#parameters)

</nav>

## Animating the removal {#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](https://unpoly.com/api/up.animate.md#named-animations) and you may also define [custom animations](https://unpoly.com/api/up.animation.md).

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`](https://unpoly.com/api/up-destroying.md) class. The element will also be given the [`[inert]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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]`](https://unpoly.com/learn/targeting-fragments.md) or [`up.fragment.get()`](https://unpoly.com/api/up.fragment.get.md).

## Running code after removal {#running-code-after-removal}

Destroying an element without animation works synchronously:

```js
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:

```js
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 {#detecting-destructor-errors}

If a [destructor](https://unpoly.com/learn/enhancing-elements.md#destructor) throws an error, `up.destroy()` will still remove the element and _not_ throw an error.

Instead destructor errors will print to the [error console](https://developer.mozilla.org/en-US/docs/Web/API/console/error) and emit an [`error` event on `window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event).

See [errors in user code](https://unpoly.com/learn/render-lifecycle.md#errors-in-user-code) for details.

---

## Parameters {#parameters}

### Scope {#parameters-scope}

#### element {#element}

(required)

The element to remove.

Type: string | [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | [jQuery](https://learn.jquery.com/using-jquery-core/jquery-object/)

### Animation {#parameters-animation}

#### [options.animation='none'] {#options.animation}

(optional)

An animation to play before the element is removed from the DOM.

Type: string | Function(element, options): [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)

#### [options.duration=175] {#options.duration}

(optional)

The duration of the animation, in milliseconds.

Type: number

#### [options.easing='ease'] {#options.easing}

(optional)

The timing function that controls the animation's acceleration.

See [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) for a list of pre-defined timing functions.

Type: string

#### [options.onFinished] {#options.onFinished}

(optional)

A callback that is run when any animations are finished and the element was removed from the DOM.

Type: Function