Clear target in optimize way (use recursive removing children)

piecioshka · Oct 14, 2020 · e3c6b8f · e3c6b8f
1 parent 0eaa923
commit e3c6b8f
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -142,7 +142,7 @@ Render table into DOM.
 
 Get number of rows.
 
-#### `findCellsByContent( ...content ): Array<{ rowIndex: number, cellIndex: number }>`
+#### `findCellsByContent( ...content: Array<string> ): Array<{ rowIndex: number, cellIndex: number }>`
 
 Get list of cell positions which contains passed strings.
 
@@ -232,6 +232,12 @@ t.on(SimpleDataTable.EVENTS.DATA_SORTED, () => {
 });
 ```
 
+## Static
+
+#### `SimpleDataTable.clearElement( $element: HTMLElement )`
+
+Recursive remove children from passed HTMLElement.
+
 ## Tested browsers
 
 * Safari v10.1.2

diff --git a/src/index.js b/src/index.js
@@ -13,22 +13,21 @@ class SimpleDataTable {
 
     _renderTHead($table) {
         const $thead = document.createElement('thead');
-        const $header = document.createElement('tr');
+        const $row = document.createElement('tr');
 
         this.headers.forEach((name, index) => {
             const $cell = this._createEmptyHeaderCell();
             $cell.textContent = name;
             $cell.addEventListener('click', () => this.sortByColumn(index));
-            $header.appendChild($cell);
+            $row.appendChild($cell);
         });
 
-        $thead.appendChild($header);
+        $thead.appendChild($row);
         $table.appendChild($thead);
     }
 
     _renderTBody($table) {
         const $tbody = document.createElement('tbody');
-        $table.appendChild($tbody);
 
         this.data.forEach((item, rowIndex) => {
             const $row = document.createElement('tr');
@@ -45,14 +44,16 @@ class SimpleDataTable {
 
             $tbody.appendChild($row);
         });
+
+        $table.appendChild($tbody);
     }
 
     render() {
         if (!this.$el) {
             throw new Error('this.$el is not defined');
         }
 
-        this.$el.innerHTML = '';
+        SimpleDataTable.clearElement(this.$el);
 
         const $wrapper = document.createElement('div');
         $wrapper.classList.add('simple-data-table');
@@ -292,6 +293,13 @@ class SimpleDataTable {
             DATA_SORTED: 'SimpleDataTable.EVENTS.DATA_SORTED'
         };
     }
+
+    static clearElement($element) {
+        while ($element.firstElementChild) {
+            $element.firstElementChild.remove();
+        }
+    }
+
 }
 
 // Exports

diff --git a/test/test.index.js b/test/test.index.js
@@ -26,7 +26,7 @@ test('clear passed container', (assert) => {
 
     const t = new SimpleDataTable($target);
     t.render();
-    assert.is($target.children.length, 2);
+    assert.is($target.children.length, 1);
     assert.is($target.querySelector('p'), null);
 });
 
@@ -237,6 +237,12 @@ test('API: find cells', (assert) => {
 
     const indexes3 = t.findCellsByContent('not exist');
     assert.is(indexes3.length, 0);
+
+    t.load([{ foo: 'bar' }, { foo: 'bar' }]);
+    t.render();
+
+    const indexes4 = t.findCellsByContent('bar');
+    assert.is(indexes4.length, 2);
 });
 
 test('API: get DOM reference of cell', (assert) => {