Double-click to remove in Settings lists ❌

front/css/app.css

@@ -875,6 +875,27 @@ input[readonly] {
     cursor: not-allowed;
   }
 
+  .removable-option:hover::before {
+    opacity: 1;
+}
+
+  .removable-option::before {
+    content: 'Double-click to ❌';
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: white;
+    background-color: rgb(255, 87, 87);
+    padding: 3px;
+    transition: opacity 0.5s;
+    opacity: 0;
+    border-radius: 3px;
+}
+
+.removable-option:hover {
+    transition: background-color 2s;
+    cursor: pointer;
+}
 
 /* ----------------------------------------------------------------- */
 /*                    Devices page                                   */

front/js/settings_utils.js

@@ -175,9 +175,26 @@
     } else {
         return false;
     }
+  }
+
+// -------------------------------------------------------------------
+ // Function to remove an item from the select element
+ function removeOptionItem(option) {
+    option.remove();
+  }
+
+// -------------------------------------------------------------------
+// Function to initialize remove functionality on select options 
+function initRemoveBtnOptn(selectorId) {
+  // Attach double-click event listeners to "Remove" 
+  $(`#${selectorId} option`).addClass('removable-option').on('dblclick', function() {
+      const $option = $(this);
+      removeOptionItem($option);
+  });
 }
 
 
 
 
 
+

front/php/templates/language/en_us.json

@@ -528,7 +528,7 @@
     "REPORT_MAIL_name": "Enable email",
     "REPORT_TITLE": "Report",
     "RandomMAC_hover": "Autodetected - indicates if the device randomizes it's MAC address.",
-    "SCAN_SUBNETS_description": "Most on-network scanners (ARP-SCAN, NMAP, NSLOOKUP, DIG, PHOLUS) rely on scanning specific network interfaces and subnets. Check the <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md\" target=\"_blank\">subnets documentation</a> for help on this setting, especially VLANs, what VLANs are supported, or how to figure out the network mask and your interface. <br/> <br/> An alternative to on-network scanners is to enable some other Device scanners/importers that don't rely on NetALert<sup>X</sup> having access to the network (UNIFI, dhcp.leases, PiHole, etc.). <br/> <br/> Note: The scan time itself depends on the number of IP addresses to check so set this up carefully with the appropriate network mask and interface.",
+    "SCAN_SUBNETS_description": "Most on-network scanners (ARP-SCAN, NMAP, NSLOOKUP, DIG, PHOLUS) rely on scanning specific network interfaces and subnets. Check the <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md\" target=\"_blank\">subnets documentation</a> for help on this setting, especially VLANs, what VLANs are supported, or how to figure out the network mask and your interface. <br/> <br/> An alternative to on-network scanners is to enable some other Device scanners/importers that don't rely on NetALert<sup>X</sup> having access to the network (UNIFI, dhcp.leases, PiHole, etc.). <br/> <br/> Note: The scan time itself depends on the number of IP addresses to check, so set this up carefully with the appropriate network mask and interface.",
     "SYSTEM_TITLE": "System Information",
     "Setting_Override": "Override value",
     "Setting_Override_Description": "Enabling this option will override an App supplied default value with the value specified above.",

front/settings.php

@@ -441,11 +441,11 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
                 <input class="form-control" id="ipInterface" type="text" placeholder="eth0" />
               </div>
               <div class="col-xs-3">
-                <button class="btn btn-primary" onclick="addInterface()">Add</button>
+                <button class="btn btn-primary" onclick="addInterface();initRemoveBtnOptn('${codeName}')">Add</button>
               </div>
             </div>
             <div class="form-group">
-              <select class="form-control" my-data-type="${setType}" name="${codeName}" id="${codeName}" multiple readonly>`;
+              <select class="form-control" my-data-type="${setType}" name="${codeName}" id="${codeName}" onchange="initRemoveBtnOptn(${codeName})" multiple readonly>`;
 
 
             options = createArray(val);
@@ -454,8 +454,13 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
               inputHtml += `<option value="${option}" disabled>${option}</option>`;
             });
 
-            inputHtml += '</select></div>' +
+            
-            `<div class="col-xs-6"><button class="btn btn-primary" onclick="removeInterfaces()">Remove all</button><button class="btn btn-primary" my-input="${codeName}" onclick="removeFromList(this)">Remove last</button></div>`;
+
+            inputHtml += `</select>
+                        </div>
+                        <div class="col-xs-6">
+                            <button class="btn btn-primary" onclick="removeInterfaces()">Remove all</button>                            
+                        </div>`;
           } else if (setType === 'list' || setType === 'list.readonly') {
 
             settingKeyOfLists.push(codeName);
@@ -466,7 +471,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
                   <input class="form-control" type="text" id="${codeName}_input" placeholder="Enter value"/>
                 </div>
                 <div class="col-xs-3">
-                  <button class="btn btn-primary" my-input-from="${codeName}_input" my-input-to="${codeName}" onclick="addList(this)">Add</button>
+                  <button class="btn btn-primary" my-input-from="${codeName}_input" my-input-to="${codeName}" onclick="addList(this);initRemoveBtnOptn('${codeName}')">Add</button>
                 </div>
               </div>
               <div class="form-group">
@@ -475,6 +480,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
             let options = createArray(val);
 
             options.forEach(option => {
+
               inputHtml += `<option value="${option}" disabled>${option}</option>`;
             });
 
@@ -513,6 +519,12 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
 
           // generate settings in the correct group section
           $(`#${group} .panel-body`).append(setHtml);
+
+          // init remove list item buttons
+          if(['subnets', 'list' ].includes(setType))
+          {
+            initRemoveBtnOptn(codeName)
+          }
           
         }
       });
@@ -615,6 +627,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
   {
     settingsChanged();    
     $(`#${$(element).attr('my-input')}`).find("option:last").remove();
+    
   }
   // ---------------------------------------------------------
   function addInterface()