1---
2category: Sensors
3---
4 
5# onElementRemoval
6 
7Fires when the element or any element containing it is removed from the DOM.
8 
9## Usage
10 
11```vue {13}
12<script setup lang="ts">
13import { onElementRemoval } from '@vueuse/core'
14import { shallowRef, useTemplateRef } from 'vue'
15 
16const btnRef = useTemplateRef('btn')
17const btnState = shallowRef(true)
18const removedCount = shallowRef(0)
19 
20function btnOnClick() {
21  btnState.value = !btnState.value
22}
23 
24onElementRemoval(btnRef, () => ++removedCount.value)
25</script>
26 
27<template>
28  <button
29    v-if="btnState"
30    @click="btnOnClick"
31  >
32    recreate me
33  </button>
34  <button
35    v-else
36    ref="btnRef"
37    @click="btnOnClick"
38  >
39    remove me
40  </button>
41  <b>removed times: {{ removedCount }}</b>
42</template>
43```
44 
45### Callback with Mutation Records
46 
47The callback receives an array of `MutationRecord` objects that triggered the removal.
48 
49```ts
50import { onElementRemoval } from '@vueuse/core'
51 
52onElementRemoval(targetRef, (mutationRecords) => {
53  console.log('Element removed', mutationRecords)
54})
55```
56 
57### Return Value
58 
59Returns a stop function to stop observing.
60 
61```ts
62const stop = onElementRemoval(targetRef, callback)
63 
64// Later, stop observing
65stop()
66```
67 
68## Type Declarations
69 
70```ts
71export interface OnElementRemovalOptions
72  extends
73    ConfigurableWindow,
74    ConfigurableDocumentOrShadowRoot,
75    WatchOptionsBase {}
76/**
77 * Fires when the element or any element containing it is removed.
78 *
79 * @param target
80 * @param callback
81 * @param options
82 */
83export declare function onElementRemoval(
84  target: MaybeElementRef,
85  callback: (mutationRecords: MutationRecord[]) => void,
86  options?: OnElementRemovalOptions,
87): Fn
88```
89