How to delete mutation record objects in javascript

Question

I'm observing changes on a Div element, that is being filled with child div's with ajax calls. My aim is to make some checks within the observed Record objects and filter some of them. How can i delete/remove/filter these mutation records from the observed mutation list? and make them filtered in the web page.

I tried to remove the mutation record from the mutations list but it didn't work. Thanks for your help.

Array.prototype.remove = function() {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var addedNode = mutation.addedNodes[0];
        if(addedNode){
            var innText = addedNode.innerText;
            //console.log("number " + i + " | " + addedNode.innerText);
            if(innText){
                if(innText.toLowerCase().indexOf(someText) > -1){
                    mutations.remove(mutation);
                }
            }
        }
    });

});

var config = {
    attributes: true,
    childList: true,
    characterData: true,
    characterDataOldValue: true,
    subtree: true
};
observer.observe(text, config);

Well, one possibility would be to a second array which only has the filtered elements. Is your mutation object removed from the array? I've tried your remove function and it worked, but how "complex" is your mutation object within the mutations array? — Fer To, Oct 13 '15 at 13:00
Ok, thanks to your issue, indexOf method is only applicable to simple data types like Number, String not on objects. I think that's why your array isn't "updated" — Fer To, Oct 13 '15 at 13:03

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

I assume that your mutation object is a complex one and not a plain data type, therefore your "indexOf" check in your .remove Method will not remove anything.

You should create an additional method, like "checkForElement" or something. In that method you can decide what is equality for your mutation objects.

There are already solutions for that at Stack Overflow, e.g. indexOf method in an object array?

edited May 23 '17 at 12:06

Community

1
1

answered Oct 13 '15 at 13:06

Fer To

1,487
13
24

indexOf check works fine above, its a simple string check in the if case – dmtzz Oct 13 '15 at 13:19

score 0 · Answer 2 · answered Oct 13 '15 at 13:10

0

You can't abort the mutations since when the callback is executed, the mutation already occured.

What you can do instead is "rollback" the mutation using the information provided in the MutationRecord, particularly the addedNodes which you seem to care for. You could simple iterate these, and for each node remove it from it's parent:

if(node.parentNode) {
  node.parentNode.removeChild(node);
}

answered Oct 13 '15 at 13:10

Amit

45,440
9
78
110

I tried this before, original page i'm observing is build with Ember.js, when i delete addedNode from any Mutation Record, I get this following error in the console: "Cannot read property 'insertBefore' of null(" – dmtzz Oct 13 '15 at 13:22
Then you're asking the wrong question. Your question is about identifying and rolling back DOM mutations, not about Ember and what kind of a mess will be created *if* you touch it's DOM. – Amit Oct 13 '15 at 13:29

How to delete mutation record objects in javascript

2 Answers2