Enable a few eslint-config-xo rules (#34620)

* unicorn/prefer-dom-node-append
* unicorn/prefer-dom-node-remove

.eslintrc.json

@@ -60,9 +60,7 @@
     "unicorn/no-useless-undefined": "off",
     "unicorn/numeric-separators-style": "off",
     "unicorn/prefer-array-flat": "off",
-    "unicorn/prefer-dom-node-append": "off",
     "unicorn/prefer-dom-node-dataset": "off",
-    "unicorn/prefer-dom-node-remove": "off",
     "unicorn/prefer-module": "off",
     "unicorn/prefer-prototype-methods": "off",
     "unicorn/prefer-query-selector": "off",

js/src/modal.js

@@ -217,7 +217,7 @@ class Modal extends BaseComponent {
 
     if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
       // Don't move modal's DOM position
-      document.body.appendChild(this._element)
+      document.body.append(this._element)
     }
 
     this._element.style.display = 'block'

js/src/tooltip.js

@@ -257,7 +257,7 @@ class Tooltip extends BaseComponent {
     Data.set(tip, this.constructor.DATA_KEY, this)
 
     if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
-      container.appendChild(tip)
+      container.append(tip)
       EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
     }
 
@@ -402,7 +402,7 @@ class Tooltip extends BaseComponent {
       if (this._config.html) {
         if (content.parentNode !== element) {
           element.innerHTML = ''
-          element.appendChild(content)
+          element.append(content)
         }
       } else {
         element.textContent = content.textContent

js/src/util/backdrop.js

@@ -102,7 +102,7 @@ class Backdrop {
       return
     }
 
-    this._config.rootElement.appendChild(this._getElement())
+    this._config.rootElement.append(this._getElement())
 
     EventHandler.on(this._getElement(), EVENT_MOUSEDOWN, () => {
       execute(this._config.clickCallback)

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.appendChild(fixtureEl)
+    document.body.append(fixtureEl)
   }
 
   return fixtureEl

js/tests/unit/carousel.spec.js

@@ -14,7 +14,7 @@ describe('Carousel', () => {
 
   const stylesCarousel = document.createElement('style')
   stylesCarousel.type = 'text/css'
-  stylesCarousel.appendChild(document.createTextNode(cssStyleCarousel))
+  stylesCarousel.append(document.createTextNode(cssStyleCarousel))
 
   const clearPointerEvents = () => {
     window.PointerEvent = null
@@ -345,7 +345,7 @@ describe('Carousel', () => {
       }
 
       document.documentElement.ontouchstart = () => {}
-      document.head.appendChild(stylesCarousel)
+      document.head.append(stylesCarousel)
       Simulator.setType('pointer')
 
       fixtureEl.innerHTML = [
@@ -371,7 +371,7 @@ describe('Carousel', () => {
         expect(item.classList.contains('active')).toEqual(true)
         expect(carousel._slide).toHaveBeenCalledWith('right')
         expect(event.direction).toEqual('right')
-        document.head.removeChild(stylesCarousel)
+        stylesCarousel.remove()
         delete document.documentElement.ontouchstart
         done()
       })
@@ -390,7 +390,7 @@ describe('Carousel', () => {
       }
 
       document.documentElement.ontouchstart = () => {}
-      document.head.appendChild(stylesCarousel)
+      document.head.append(stylesCarousel)
       Simulator.setType('pointer')
 
       fixtureEl.innerHTML = [
@@ -416,7 +416,7 @@ describe('Carousel', () => {
         expect(item.classList.contains('active')).toEqual(false)
         expect(carousel._slide).toHaveBeenCalledWith('left')
         expect(event.direction).toEqual('left')
-        document.head.removeChild(stylesCarousel)
+        stylesCarousel.remove()
         delete document.documentElement.ontouchstart
         done()
       })

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

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

js/tests/unit/dom/manipulator.spec.js

@@ -151,7 +151,7 @@ describe('Manipulator', () => {
       const { defaultView: win, body } = fixtureEl.ownerDocument
       const forceScrollBars = document.createElement('div')
       forceScrollBars.style.cssText = 'position:absolute;top:5000px;left:5000px;width:1px;height:1px'
-      body.appendChild(forceScrollBars)
+      body.append(forceScrollBars)
 
       const scrollHandler = () => {
         expect(window.pageYOffset).toBe(scrollY)
@@ -165,7 +165,7 @@ describe('Manipulator', () => {
         })
 
         win.removeEventListener('scroll', scrollHandler)
-        body.removeChild(forceScrollBars)
+        forceScrollBars.remove()
         win.scrollTo(0, 0)
         done()
       }

js/tests/unit/modal.spec.js

@@ -19,7 +19,7 @@ describe('Modal', () => {
 
     document.querySelectorAll('.modal-backdrop')
       .forEach(backdrop => {
-        document.body.removeChild(backdrop)
+        backdrop.remove()
       })
   })
 
@@ -143,7 +143,7 @@ describe('Modal', () => {
       modalEl.addEventListener('shown.bs.modal', () => {
         const dynamicModal = document.getElementById(id)
         expect(dynamicModal).not.toBeNull()
-        dynamicModal.parentNode.removeChild(dynamicModal)
+        dynamicModal.remove()
         done()
       })
 

js/tests/unit/popover.spec.js

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

js/tests/unit/tab.spec.js

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

js/tests/unit/tooltip.spec.js

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

js/tests/unit/util/backdrop.spec.js

@@ -18,7 +18,7 @@ describe('Backdrop', () => {
     const list = document.querySelectorAll(CLASS_BACKDROP)
 
     list.forEach(el => {
-      document.body.removeChild(el)
+      el.remove()
     })
   })
 
@@ -141,7 +141,7 @@ describe('Backdrop', () => {
       const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
 
       instance.show(() => {
-        wrapper.parentNode.removeChild(wrapper)
+        wrapper.remove()
         instance.hide(() => {
           expect(getElements().length).toEqual(0)
           done()

site/.eslintrc.json

@@ -52,7 +52,6 @@
     "unicorn/no-null": "off",
     "unicorn/numeric-separators-style": "off",
     "unicorn/prefer-array-flat": "off",
-    "unicorn/prefer-dom-node-append": "off",
     "unicorn/prefer-dom-node-dataset": "off",
     "unicorn/prefer-module": "off",
     "unicorn/prefer-prototype-methods": "off",