Skip to content
This repository was archived by the owner on Dec 17, 2021. It is now read-only.

Latest commit

 

History

History
53 lines (40 loc) · 1.79 KB

disconnectedcallback.md

File metadata and controls

53 lines (40 loc) · 1.79 KB

DOM/disconnectedCallback()

This function observes when the specified elements are removed from the document or given context. This is a convenience function for mutationCallback()

Import

import disconnectedCallback from '@web-native-js/play-ui/src/dom/disconnectedCallback.js';

Syntax

disconnectedCallback(els, callback[, context = null[, observeIndirectMutation = true]]);

Parameters

  • els - HTMLElement|String|Array: The specific element or elements to observe. This could be a single element instance, a CSS selector or an array of element specifiers.
  • callback - Function: The callback function that recieves the notification. This callback will recieve the following arguments.
    • nodes - [HTMLElement]: A variadic list of the elements removed from the DOM.
  • context - DOMDocument|HTMLElement: (Optional) The subtree to observe. This is the document itself by default.
  • observeIndirectMutation - Boolean: (Optional) A specifier that tells whether to watch direct or indirect mutations of the specified elements.

Return

  • MutationObserver - The instantiated MutationObserver.

Usage

<body>
  <div id="el1"></div>
  <div id="el2"></div>
</body>

// Obtain an element instance
let el1 = document.querySelector('#el1');

// Observe both by instance and by selector
disconnectedCallback([el1, '#el2'], (...nodes) => {
    console.log('These nodes are now removed from the document.', ...nodes);
});

// Start mutating
setTimeout(() => {
    el1.remove(); // These nodes are now removed from the document. #el1
    setTimeout(() => {
        document.querySelector('#el2').remove(); // These nodes are now removed from the document. #el2
    }, 1000);
}, 1000);