feat: Better method of removing DOM elements

angelomedeiros · Jun 28, 2018 · 7050b28 · 7050b28
1 parent f26334e
commit 7050b28
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 38 deletions.
diff --git a/src/components/modal/QModal.js b/src/components/modal/QModal.js
@@ -228,10 +228,6 @@ export default {
         }
         document.body.classList[state.action]('q-responsive-modal')
       }
-    },
-    __removeChild () {
-      const parentNode = this.$el.parentNode
-      parentNode && parentNode.removeChild(this.$el)
     }
   },
   mounted () {
@@ -240,7 +236,7 @@ export default {
     }
   },
   beforeDestroy () {
-    this.__removeChild()
+    this.$el.remove()
   },
   render (h) {
     return h('transition', {
@@ -251,11 +247,11 @@ export default {
         },
         enterCancelled: () => {
           this.showPromise && this.showPromiseReject()
-          this.__removeChild()
+          this.$el.remove()
         },
         afterLeave: () => {
           this.hidePromise && this.hidePromiseResolve()
-          this.__removeChild()
+          this.$el.remove()
         },
         leaveCancelled: () => {
           this.hidePromise && this.hidePromiseReject()

diff --git a/src/components/popover/QPopover.js b/src/components/popover/QPopover.js
@@ -138,8 +138,7 @@ export default {
       window.removeEventListener('resize', this.__updatePosition, listenOpts.passive)
       EscapeKey.pop()
 
-      const parentNode = this.$el.parentNode
-      parentNode && parentNode.removeChild(this.$el)
+      this.$el.remove()
       this.hidePromise && this.hidePromiseResolve()
       if (!this.noRefocus && this.__refocusTarget) {
         this.__refocusTarget.focus()

diff --git a/src/components/tooltip/QTooltip.js b/src/components/tooltip/QTooltip.js
@@ -68,9 +68,8 @@ export default {
 
       this.scrollTarget.removeEventListener('scroll', this.hide, listenOpts.passive)
       window.removeEventListener('resize', this.__debouncedUpdatePosition, listenOpts.passive)
+      this.$el.remove()
 
-      const parentNode = this.$el.parentNode
-      parentNode && parentNode.removeChild(this.$el)
       if (this.$q.platform.is.mobile) {
         document.body.removeEventListener('click', this.hide, true)
       }

diff --git a/src/directives/ripple.js b/src/directives/ripple.js
@@ -41,10 +41,7 @@ function showRipple (evt, el, { stop, center }) {
     css(animNode, cssTransform(`translate(${x}px, ${y}px) scale3d(1, 1, 1)`))
     setTimeout(() => {
       animNode.classList.remove('q-ripple-animation-visible')
-      setTimeout(() => {
-        const parentNode = container.parentNode
-        parentNode && parentNode.removeChild(container)
-      }, 300)
+      setTimeout(() => { container.remove() }, 300)
     }, 300)
   }, 10)
 }

diff --git a/src/plugins/loading.js b/src/plugins/loading.js
@@ -82,8 +82,7 @@ export default {
     else {
       vm.$destroy()
       document.body.classList.remove('with-loading')
-      const parentNode = vm.$el.parentNode
-      parentNode && parentNode.removeChild(vm.$el)
+      vm.$el.remove()
       vm = null
     }
 

diff --git a/src/polyfills.js b/src/polyfills.js
@@ -95,32 +95,51 @@ if (!String.prototype.endsWith) {
   }
 }
 
-if (!isSSR && typeof Element.prototype.matches !== 'function') {
-  Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.webkitMatchesSelector || function matches (selector) {
-    let
-      element = this,
-      elements = (element.document || element.ownerDocument).querySelectorAll(selector),
-      index = 0
-
-    while (elements[index] && elements[index] !== element) {
-      ++index
-    }
+if (!isSSR) {
+  if (typeof Element.prototype.matches !== 'function') {
+    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.webkitMatchesSelector || function matches (selector) {
+      let
+        element = this,
+        elements = (element.document || element.ownerDocument).querySelectorAll(selector),
+        index = 0
+
+      while (elements[index] && elements[index] !== element) {
+        ++index
+      }
 
-    return Boolean(elements[index])
+      return Boolean(elements[index])
+    }
   }
-}
 
-if (!isSSR && typeof Element.prototype.closest !== 'function') {
-  Element.prototype.closest = function closest (selector) {
-    let el = this
-    while (el && el.nodeType === 1) {
-      if (el.matches(selector)) {
-        return el
+  if (typeof Element.prototype.closest !== 'function') {
+    Element.prototype.closest = function closest (selector) {
+      let el = this
+      while (el && el.nodeType === 1) {
+        if (el.matches(selector)) {
+          return el
+        }
+        el = el.parentNode
       }
-      el = el.parentNode
+      return null
     }
-    return null
   }
+
+  // from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+  (function (arr) {
+    arr.forEach(item => {
+      if (item.hasOwnProperty('remove')) { return }
+      Object.defineProperty(item, 'remove', {
+        configurable: true,
+        enumerable: true,
+        writable: true,
+        value () {
+          if (this.parentNode !== null) {
+            this.parentNode.removeChild(this)
+          }
+        }
+      })
+    })
+  })([Element.prototype, CharacterData.prototype, DocumentType.prototype])
 }
 
 if (!Array.prototype.find) {

diff --git a/src/utils/scroll.js b/src/utils/scroll.js
@@ -83,7 +83,7 @@ export function getScrollbarWidth () {
     w2 = outer.clientWidth
   }
 
-  document.body.removeChild(outer)
+  outer.remove()
   size = w1 - w2
 
   return size