How to get a deleted element in a contenteditable div?

Question

How to get a deleted element in a contenteditable div?

707 Views Asked by user4878054 At 03 April 2025 at 06:29

I set the root div to contenteditable, and it contains many img and video elements. So when a user edits it and presses backspace to delete one element, How can I get which one the user deleted and get the deleted element's attributes values?

Original Q&A

There are 3 best solutions below

Jonathan On 17 June 2015 at 06:27

https://developer.mozilla.org/en-US/docs/Web/Events/input

Register an eventlistener for the event input. If you need IE support you might consider using keypress event instead.

The events might fire before the actual change happend, and keypress might not register paste and cut changes, so you want to handle those events as well (input fires on those too).

Then calculate the difference before and after the edit, analyse it and there you go.

Lain On 17 June 2015 at 06:46

https://jsfiddle.net/814j80z2/

<html>
    <head>
        <script>
            var myContent = {
                currentList: [], //List since last time.
                initialList: [], //Starting list, just if we need it at some point.

                //Storing all current nested elements in currentList and initialList
                Init: function(){
                    var tRoot = document.getElementById('Contenteditable');
                    var tL = document.querySelectorAll('a, img'); //Or just all '*'.

                    for(var i=0, j=tL.length; i<j; i++){
                        this.currentList.push(tL[i]);
                        this.initialList.push(tL[i]);
                    }

                    if (!tRoot.oninput) tRoot.oninput = function(){myContent.onInput(this)} //Depending on your requirements use others.
                    if (!tRoot.onkeyup) tRoot.onkeyup = function(){myContent.onInput(this)} //Depending on your requirements use others.
                },

                //Comparing current nested elements with currentList and set new currentList
                checkChangedElements: function(e){
                    if (e){
                        var tE = []; //Storing the exceptions.
                        var tN = []; //Our new current list.
                        var tC = []; //Current elements:

                        var tL = document.querySelectorAll('a, img'); //Or just all '*'.
                        for(var i=0, j=tL.length; i<j; i++) tC.push(tL[i]);

                        for(var i=0, j=myContent.currentList.length; i<j; i++){
                            //if (tC.some(function(item){return item === myContent.currentList[i]}) tE.push(tL[i])
                            if (tC.indexOf(myContent.currentList[i]) === -1) tE.push(myContent.currentList[i])
                            else tN.push(myContent.currentList[i])
                        }

                        myContent.currentList = tN;
                        return tE;
                    }
                },

                //Our input function firing each two seconds
                onInput: function(e){
                    if (e){
                        if (e.inputTimer) clearTimeout(e.inputTimer); //We fire it after two seconds without any input
                        e.inputTimer = setTimeout(function(e){
                            var tL = myContent.checkChangedElements(e);
                            e.inputTimer = null;
                            console.log('Deleted elements: ', tL)
                        }.bind(undefined, e), 2000)
                    }
                }
            }
        </script>
    </head>

    <body onload = 'myContent.Init()'>
        <div contenteditable = 'true' id = 'Contenteditable'>
            <img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
            <a href = 'https://www.google.com/'>Google</a>
            <img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
            <a href = 'https://www.google.com/'>Google</a>
            <img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
            <a href = 'https://www.google.com/'>Google</a>
            <img alt = '' src = 'https://www.google.com//images/srpr/logo11w.png' />
        </div>
    </body>
</html>

Edit: Added onkeydown for elder IE versions.

**dakab** · Accepted Answer

If you’re interested in the deleted element and its properties, one way is to set a MutationObserver to track modifications to the DOM. Its callback provides changes and affected elements and other userful information.

(new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
        if(mutation.type=='attributes')
            console.log('Element attributes may have changed, see record:',mutation);
        else
        if(mutation.type=='childList')
            console.log('Child nodes were modified, see record:',mutation,
                        'or removedNodes:',mutation.removedNodes);
});})).observe(document.getElementById('edit'),{
    subtree:true,
    attributes:true,
    childList:true,
    characterData:true,
    characterDataOldValue:true
});

Fiddle: https://jsfiddle.net/0tdm1wwv/2/

Take a look at it in other browsers too, since contenteditable has some interesting flavors.

How to get a deleted element in a contenteditable div?

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in HTML-SELECT

Trending Questions

Popular # Hahtags

Popular Questions