Polyfill for DOM element delete?

Question

I need to create the polyfill for DOM element delete. Can not understand, what is I making wrong. The deleteElements() method must delete the current element.

<div>1</div>
<div>2</div>
<div>3</div>

<script>
  if (document.documentElement.deleteElements === undefined) {
    object.defineProperty(Element.prototype, 'deleteElements', {
        get: function() {
            var elem = this.firstChild;
            delete elem;
            return
        },

        set: function(variable) {
            this.firstChild = variable;
        }

    });
  }

  var elem = document.body.children[0];

  elem.deleteElements(); // <-- call must delete an element

</script>

You have a typo: `remov` where you want `remove`. Or `remove` where you want `remov` (as you used `remov` twice but `remove` just once). You need to be consistent. — T.J. Crowder, Jan 21 '18 at 12:39
Separately: That's not a good polyfill for `remove` (why in heaven's name would you have a getter and setter?). [Here's a better one](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove). — T.J. Crowder, Jan 21 '18 at 12:41
@SviatKuzhelev: No, again, you need to be consistent. It's no good testing for `remov`, trying to use `remov`, but defining `remove`. — T.J. Crowder, Jan 21 '18 at 12:41
That's also not at all how `delete` is used. [`delete`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete) removes a property from an object. It has nothing to do with removing an element from the DOM. — T.J. Crowder, Jan 21 '18 at 12:42
And now (as of your edit) you're testing for `deleteElements`, using `deleteElements`, but still defining `remove`. — T.J. Crowder, Jan 21 '18 at 12:43
Stop trying to use a getter and setter for this and just use an ordinary function. Right now, `elem.deleteElements` would evaluate to `undefined` and trying to call that will produce an error. — JLRishe, Jan 21 '18 at 12:45
@T.J.Crowder now I understand. Thank you. I had change `remove` on `deleteElements` where is needed. But I still do not understand how I can improve the delete Polyfill to make it work. — Sviat Kuzhelev, Jan 21 '18 at 12:47

score 1 · Accepted Answer · answered Jan 21 '18 at 12:52

There are several problems there:

You're defining a property with a getter and setter, then using that property as as function, but the getter doesn't return a function. You almost certainly don't want to use a getter and setter.
As I said in my comment, delete has nothing to do with removing elements from the DOM. delete removes a property from an object. It has nothing to do with removing an element from the DOM.

If you want to remove the first child of an element without using the native remove, you'd do this:

this.removeChild(this.firstChild);

(There's also no need for return at the end of a function unless you're returning a value.)

If you want define a new method on Element.prototype, you'd do it like this:

Object.defineProperty(Element.prototype, "deleteElements", {
    value: function() {
        // ...code here...
    },
    writable: true,    // These are the values for the
    enumerable: true,  // `remove` property on `Element.prototype`
    configurable: true // on browsers that property support it
});

@SviatKuzhelev: No worries, glad that helped! – T.J. Crowder Jan 21 '18 at 13:13 — T.J. Crowder, Jan 21 '18 at 13:13

Polyfill for DOM element delete?

1 Answers1