Recreate the records tree when searching

static/js/dns.mjs

@@ -8,6 +8,7 @@ export class Application {
 		this.topFolder = new Folder(this, null, 'root')
 		this.recordsTree = null
 		this.settingsIcon = null
+		this.createIcon = null
 
 		this.searchFor = ''
 
@@ -108,7 +109,7 @@ export class Application {
 		return 0
 	}// }}}
 	render() {// {{{
-		if (this.recordsTree == null) {
+		if (this.createIcon === null) {
 			this.createIcon = document.createElement('img')
 			this.createIcon.id = 'create-icon'
 			this.createIcon.src = `/images/${_VERSION}/icon_create.svg`
@@ -133,17 +134,20 @@ export class Application {
 			const search = searchEl.querySelector('button.search')
 			search.addEventListener('click', () => this.search())
 
+			document.body.appendChild(this.settingsIcon)
+			document.body.appendChild(this.createIcon)
+			document.body.appendChild(searchEl)
 
+			document.body.addEventListener('keydown', event => this.handlerKeys(event))
+		}
+
+		// The recordstree is deleted when making a search and is therefore
+		// not created along with icons and search above.
+		if (this.recordsTree === null) {
 			this.recordsTree = document.createElement('div')
 			this.recordsTree.id = 'records-tree'
 
-
-			document.body.appendChild(searchEl)
 			document.body.appendChild(this.recordsTree)
-			document.body.appendChild(this.settingsIcon)
-			document.body.appendChild(this.createIcon)
-
-			document.body.addEventListener('keydown', event => this.handlerKeys(event))
 		}
 
 		// Top root folder doesn't have to be shown.
@@ -221,6 +225,9 @@ export class Application {
 	}// }}}
 	search() {// {{{
 		this.searchFor = this.searchField.value.trim().toLowerCase()
+		this.recordsTree.remove()
+		this.topFolder = new Folder(this, null, 'root')
+		this.recordsTree = null
 
 		this.cleanFolders()
 		this.renderFolders()