DOMPurify/demos/hooks-node-removal2-demo.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>DOMPurify demo: Hook to remove an element and its content</title>
        <script src="../dist/purify.js"></script>
    </head>
    <body>
        <!-- Our PRE to receive content -->
        <pre id="sanitized"></pre>

        <!-- Now let's sanitize that content -->
        <script>
            'use strict';
            
            /**
             * In this example, we have some subset of tags that we want to allow, and we have some tags that, if
             * encountered, need to be removed completely, including any nested content. An example might be stripping
             * out the footer.
             *
             * We can't simply remove the footer tag from the ALLOWED_TAGS configuration because all that will do is
             * strip out the footer tag but leave the nested content. And we can't register 'footer' in the FORBID_TAGS
             * config because you can't use both FORBID_TAGS and ALLOWED_TAGS together.
             *
             * So in this scenario, we only want to allow divs, and we want footers removed entirely.
             */
            
            // Specify dirty HTML
            const dirty = '<div><span>This should remain</span><footer>This should be stripped</footer></div>';
            
            // What we want is '<div>This should remain</div>' -- span is removed but content kept, but the footer is
            // completely removed.
            
            DOMPurify.setConfig({
                ALLOWED_TAGS: [
                    'div',    // because we really want it
                    '#text',  // because we really want it
                    // 'footer' is added because if not included, the default behavior is to strip
                    // the tag but keep the content, which we don't want. So, we use a hook for actual
                    // removal. The hook requires the tag to be an allowed tag or errors are thrown.
                    'footer'
                ]
            });
            
            /**
             * This hook removes the footer element and its children entirely. Note that if we did not also register
             * the footer as an allowed tag, we would get an error. So, it's important to do both.
             */
            DOMPurify.addHook('uponSanitizeElement', node => {
                if (node.tagName === 'FOOTER') {
                    node.remove();
                }
            });
            
            // Clean HTML string and write into our DIV
            const clean = DOMPurify.sanitize(dirty);
            document.getElementById('sanitized').textContent = clean;
        </script>
    </body>
</html>