From 6690110216396dcb65f1158fe64ad30f7cd34640 Mon Sep 17 00:00:00 2001
From: Johannes Kimmel <fff@bareminimum.eu>
Date: Sat, 22 Apr 2023 17:53:55 +0200
Subject: [PATCH] delete empty input fields from MultiInput lists

---
 l3config.js | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/l3config.js b/l3config.js
index 522ff88..182eb71 100644
--- a/l3config.js
+++ b/l3config.js
@@ -121,9 +121,12 @@ class L3Input {
 		this.input = undefined;
 	}
 	node() {
-		let newLabel = document.createElement('label');
-		newLabel.setAttribute('for', this.id);
-		newLabel.innerHTML = this.label;
+		let newLabel = undefined
+		if (this.label) {
+			newLabel = document.createElement('label');
+			newLabel.setAttribute('for', this.id);
+			newLabel.innerHTML = this.label;
+		}
 
 		this.input = document.createElement('input');
 		this.input.setAttribute('id', this.id);
@@ -132,6 +135,7 @@ class L3Input {
 		}
 
 		let inner = (this.input.type === 'radio') ? [this.input, newLabel] : [newLabel, this.input];
+		inner = inner.filter(e => !!e);
 
 		if (this.datalist) {
 			let datalist = document.createElement('datalist');
@@ -216,14 +220,14 @@ class L3MultiInput {
 		let div = newinput.node();
 		for (let input of div.getElementsByTagName('input')) {
 			console.log(input);
-			input.addEventListener('input', () => this.handleUpdate())
-		}
+			input.addEventListener('input', () => this.handleUpdate());
+			input.addEventListener('focusout', () => {
+				if (input.value) return;
 
-		let del = document.createElement('button');
-		del.setAttribute('type', 'button');
-		del.addEventListener('click', () => this.removeInput(newinput, div));
-		del.innerHTML = 'Remove';
-		div.append(del);
+				this.removeInput(input, input.parentElement)
+				this.handleUpdate();
+			});
+		}
 
 		inputcontainer.before(div);
 		this.handleUpdate();
@@ -279,7 +283,7 @@ function initForm() {
 		new L3Input('Anycast DNS64','dnsAnycast64', 'server', {type: 'radio', name: 'anycast', value: 'fd43:5602:29bd:ffff:1:1:1:64'}),
 		new L3Input('Disable','dnsAnycastNone', 'server', {type: 'radio', name: 'anycast', value: undefined}),
 		new L3MultiInput('+ Custom DNS Server', () => l3cfg.handleUpdate(), function(idsuffix) {
-			return new L3Input('Custom DNS Server','dnsOther'+idsuffix, 'server', {type: 'text', maxlength: 39, placeholder: 'Custom DNS Server'});
+			return new L3Input(undefined,'dnsOther'+idsuffix, 'server', {type: 'text', maxlength: 39, placeholder: 'Custom DNS Server'});
 		}),
 	));
 	l3cfg.addSection(new L3Section('wan',