Revert "Switch to Node#append() / Node#remove()"

Edge 16 does not support these.

.eslintrc.json

@@ -49,6 +49,8 @@
     "unicorn/no-null": "off",
     "unicorn/no-unused-properties": "error",
     "unicorn/prefer-dataset": "off",
+    "unicorn/prefer-node-append": "off",
+    "unicorn/prefer-node-remove": "off",
     "unicorn/prefer-query-selector": "off",
     "unicorn/prevent-abbreviations": "off"
   }

js/src/alert.js

@@ -107,7 +107,7 @@ class Alert {
 
   _destroyElement(element) {
     if (element.parentNode) {
-      element.remove()
+      element.parentNode.removeChild(element)
     }
 
     EventHandler.trigger(element, EVENT_CLOSED)

js/src/modal.js

@@ -242,7 +242,7 @@ class Modal {
     if (!this._element.parentNode ||
         this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
       // Don't move modal's DOM position
-      document.body.append(this._element)
+      document.body.appendChild(this._element)
     }
 
     this._element.style.display = 'block'
@@ -333,7 +333,7 @@ class Modal {
   }
 
   _removeBackdrop() {
-    this._backdrop.remove()
+    this._backdrop.parentNode.removeChild(this._backdrop)
     this._backdrop = null
   }
 
@@ -350,7 +350,7 @@ class Modal {
         this._backdrop.classList.add(animate)
       }
 
-      document.body.append(this._backdrop)
+      document.body.appendChild(this._backdrop)
 
       EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => {
         if (this._ignoreBackdropClick) {
@@ -515,9 +515,9 @@ class Modal {
   _getScrollbarWidth() { // thx d.walsh
     const scrollDiv = document.createElement('div')
     scrollDiv.className = CLASS_NAME_SCROLLBAR_MEASURER
-    document.body.append(scrollDiv)
+    document.body.appendChild(scrollDiv)
     const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth
-    scrollDiv.remove()
+    document.body.removeChild(scrollDiv)
     return scrollbarWidth
   }
 

js/src/tooltip.js

@@ -230,7 +230,7 @@ class Tooltip {
     EventHandler.off(this.element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
 
     if (this.tip) {
-      this.tip.remove()
+      this.tip.parentNode.removeChild(this.tip)
     }
 
     this._isEnabled = null
@@ -286,7 +286,7 @@ class Tooltip {
       Data.setData(tip, this.constructor.DATA_KEY, this)
 
       if (!this.element.ownerDocument.documentElement.contains(this.tip)) {
-        container.append(tip)
+        container.appendChild(tip)
       }
 
       EventHandler.trigger(this.element, this.constructor.Event.INSERTED)
@@ -334,7 +334,7 @@ class Tooltip {
     const tip = this.getTipElement()
     const complete = () => {
       if (this._hoverState !== HOVER_STATE_SHOW && tip.parentNode) {
-        tip.remove()
+        tip.parentNode.removeChild(tip)
       }
 
       this._cleanTipClass()
@@ -417,7 +417,7 @@ class Tooltip {
       if (this.config.html) {
         if (content.parentNode !== element) {
           element.innerHTML = ''
-          element.append(content)
+          element.appendChild(content)
         }
       } else {
         element.textContent = content.textContent

js/src/util/sanitizer.js

@@ -108,7 +108,7 @@ export function sanitizeHtml(unsafeHtml, whiteList, sanitizeFn) {
     const elName = el.nodeName.toLowerCase()
 
     if (!whitelistKeys.includes(elName)) {
-      el.remove()
+      el.parentNode.removeChild(el)
 
       continue
     }

js/tests/helpers/fixture.js

@@ -11,7 +11,7 @@ export const getFixture = () => {
     fixtureEl.style.left = '-10000px'
     fixtureEl.style.width = '10000px'
     fixtureEl.style.height = '10000px'
-    document.body.append(fixtureEl)
+    document.body.appendChild(fixtureEl)
   }
 
   return fixtureEl

js/tests/unit/carousel.spec.js

@@ -13,7 +13,7 @@ describe('Carousel', () => {
 
   const stylesCarousel = document.createElement('style')
   stylesCarousel.type = 'text/css'
-  stylesCarousel.append(document.createTextNode(cssStyleCarousel))
+  stylesCarousel.appendChild(document.createTextNode(cssStyleCarousel))
 
   const clearPointerEvents = () => {
     window.PointerEvent = null
@@ -309,7 +309,7 @@ describe('Carousel', () => {
       }
 
       document.documentElement.ontouchstart = () => {}
-      document.head.append(stylesCarousel)
+      document.head.appendChild(stylesCarousel)
       Simulator.setType('pointer')
 
       fixtureEl.innerHTML = [
@@ -334,7 +334,7 @@ describe('Carousel', () => {
       carouselEl.addEventListener('slid.bs.carousel', () => {
         expect(item.classList.contains('active')).toEqual(true)
         expect(carousel.prev).toHaveBeenCalled()
-        stylesCarousel.remove()
+        document.head.removeChild(stylesCarousel)
         delete document.documentElement.ontouchstart
         done()
       })
@@ -353,7 +353,7 @@ describe('Carousel', () => {
       }
 
       document.documentElement.ontouchstart = () => {}
-      document.head.append(stylesCarousel)
+      document.head.appendChild(stylesCarousel)
       Simulator.setType('pointer')
 
       fixtureEl.innerHTML = [
@@ -378,7 +378,7 @@ describe('Carousel', () => {
       carouselEl.addEventListener('slid.bs.carousel', () => {
         expect(item.classList.contains('active')).toEqual(false)
         expect(carousel.next).toHaveBeenCalled()
-        stylesCarousel.remove()
+        document.head.removeChild(stylesCarousel)
         delete document.documentElement.ontouchstart
         done()
       })

js/tests/unit/dom/event-handler.spec.js

@@ -278,10 +278,10 @@ describe('EventHandler', () => {
     it('should remove the correct delegated event listener', () => {
       const element = document.createElement('div')
       const subelement = document.createElement('span')
-      element.append(subelement)
+      element.appendChild(subelement)
 
       const anchor = document.createElement('a')
-      element.append(anchor)
+      element.appendChild(anchor)
 
       let i = 0
       const handler = () => {
@@ -291,7 +291,7 @@ describe('EventHandler', () => {
       EventHandler.on(element, 'click', 'a', handler)
       EventHandler.on(element, 'click', 'span', handler)
 
-      fixtureEl.append(element)
+      fixtureEl.appendChild(element)
 
       EventHandler.trigger(anchor, 'click')
       EventHandler.trigger(subelement, 'click')

js/tests/unit/modal.spec.js

@@ -16,9 +16,9 @@ describe('Modal', () => {
 
     style = document.createElement('style')
     style.type = 'text/css'
-    style.append(document.createTextNode(css))
+    style.appendChild(document.createTextNode(css))
 
-    document.head.append(style)
+    document.head.appendChild(style)
 
     // Simulate scrollbars
     document.documentElement.style.paddingRight = '16px'
@@ -33,14 +33,14 @@ describe('Modal', () => {
 
     document.querySelectorAll('.modal-backdrop')
       .forEach(backdrop => {
-        backdrop.remove()
+        document.body.removeChild(backdrop)
       })
 
     document.body.style.paddingRight = '0px'
   })
 
   afterAll(() => {
-    style.remove()
+    document.head.removeChild(style)
     document.documentElement.style.paddingRight = '0px'
   })
 
@@ -147,8 +147,8 @@ describe('Modal', () => {
       const styleTest = document.createElement('style')
 
       styleTest.type = 'text/css'
-      styleTest.append(document.createTextNode('body { padding-right: 7px; }'))
-      document.head.append(styleTest)
+      styleTest.appendChild(document.createTextNode('body { padding-right: 7px; }'))
+      document.head.appendChild(styleTest)
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -159,7 +159,7 @@ describe('Modal', () => {
 
       modalEl.addEventListener('hidden.bs.modal', () => {
         expect(window.getComputedStyle(document.body).paddingLeft).toEqual('0px', 'body does not have inline padding set')
-        styleTest.remove()
+        document.head.removeChild(styleTest)
         done()
       })
 
@@ -171,9 +171,9 @@ describe('Modal', () => {
       const styleTest = document.createElement('style')
 
       styleTest.type = 'text/css'
-      styleTest.append(document.createTextNode('body { padding-right: 7px; }'))
+      styleTest.appendChild(document.createTextNode('body { padding-right: 7px; }'))
 
-      document.head.append(styleTest)
+      document.head.appendChild(styleTest)
       document.body.style.color = 'red'
 
       const modalEl = fixtureEl.querySelector('.modal')
@@ -188,7 +188,7 @@ describe('Modal', () => {
 
         expect(bodyPaddingRight === '0px' || bodyPaddingRight === '').toEqual(true, 'body does not have inline padding set')
         expect(document.body.style.color).toEqual('red', 'body still has other inline styles set')
-        styleTest.remove()
+        document.head.removeChild(styleTest)
         document.body.removeAttribute('style')
         done()
       })
@@ -276,7 +276,7 @@ describe('Modal', () => {
       modalEl.addEventListener('shown.bs.modal', () => {
         const dynamicModal = document.getElementById(id)
         expect(dynamicModal).toBeDefined()
-        dynamicModal.remove()
+        dynamicModal.parentNode.removeChild(dynamicModal)
         done()
       })
 

js/tests/unit/popover.spec.js

@@ -16,7 +16,7 @@ describe('Popover', () => {
     const popoverList = document.querySelectorAll('.popover')
 
     popoverList.forEach(popoverEl => {
-      popoverEl.remove()
+      document.body.removeChild(popoverEl)
     })
   })
 

js/tests/unit/tab.spec.js

@@ -319,8 +319,8 @@ describe('Tab', () => {
         const tabId = linkEl.getAttribute('href')
         const tabIdEl = fixtureEl.querySelector(tabId)
 
-        liEl.remove()
-        tabIdEl.remove()
+        liEl.parentNode.removeChild(liEl)
+        tabIdEl.parentNode.removeChild(tabIdEl)
         secondNavTab.show()
       })
 

js/tests/unit/tooltip.spec.js

@@ -16,7 +16,7 @@ describe('Tooltip', () => {
     clearFixture()
 
     document.querySelectorAll('.tooltip').forEach(tooltipEl => {
-      tooltipEl.remove()
+      document.body.removeChild(tooltipEl)
     })
   })
 
@@ -375,7 +375,7 @@ describe('Tooltip', () => {
         tooltipEl.removeEventListener('shown.bs.tooltip', firstCallback)
         let tooltipShown = document.querySelector('.tooltip')
 
-        tooltipShown.remove()
+        tooltipShown.parentNode.removeChild(tooltipShown)
 
         tooltipEl.addEventListener('shown.bs.tooltip', () => {
           tooltipShown = document.querySelector('.tooltip')
@@ -835,7 +835,7 @@ describe('Tooltip', () => {
         html: true
       })
 
-      tooltip.getTipElement().append(childContent)
+      tooltip.getTipElement().appendChild(childContent)
       tooltip.setElementContent(tooltip.getTipElement(), childContent)
 
       expect().nothing()

site/.eslintrc.json

@@ -36,6 +36,7 @@
     "unicorn/no-for-loop": "off",
     "unicorn/no-null": "off",
     "unicorn/prefer-dataset": "off",
+    "unicorn/prefer-node-append": "off",
     "unicorn/prefer-query-selector": "off",
     "unicorn/prevent-abbreviations": "off"
   }