diff --git a/app/assets/js/device-type-edit-form.js b/app/assets/js/device-type-edit-form.js
new file mode 100644
index 0000000..57a785d
--- /dev/null
+++ b/app/assets/js/device-type-edit-form.js
@@ -0,0 +1,88 @@
+(() => {
+    function addPortRow() {
+        const body = document.getElementById('port-definition-body');
+        if (!body) {
+            return;
+        }
+
+        const emptyRow = body.querySelector('tr td em');
+        if (emptyRow) {
+            const emptyTableRow = emptyRow.closest('tr');
+            if (emptyTableRow) {
+                emptyTableRow.remove();
+            }
+        }
+
+        const rowCount = body.querySelectorAll('tr').length;
+        const index = rowCount;
+        const number = rowCount + 1;
+
+        const optionsTemplate = document.getElementById('port-type-options-template');
+        const portTypeOptions = optionsTemplate
+            ? optionsTemplate.innerHTML
+            : '<option value="">- Kein Typ -</option>';
+
+        const row = document.createElement('tr');
+        row.innerHTML = `
+            <td>${number}</td>
+            <td>
+                <input type="hidden" name="port_rows[${index}][id]" value="">
+                <input type="text" name="port_rows[${index}][name]" value="" placeholder="z.B. Gi1/0/1">
+            </td>
+            <td>
+                <select name="port_rows[${index}][port_type_id]">
+                    ${portTypeOptions}
+                </select>
+            </td>
+            <td>
+                <label class="inline-checkbox">
+                    <input type="checkbox" name="port_rows[${index}][delete]" value="1">
+                    entfernen
+                </label>
+            </td>
+        `;
+
+        body.appendChild(row);
+    }
+
+    function bindAddPortRowButton() {
+        const addButton = document.getElementById('add-port-row');
+        if (!addButton || addButton.dataset.portRowBound === '1') {
+            return;
+        }
+        addButton.addEventListener('click', addPortRow);
+        addButton.dataset.portRowBound = '1';
+    }
+
+    function bindDeleteButton() {
+        const deleteButton = document.getElementById('device-type-delete');
+        if (!deleteButton || deleteButton.dataset.deleteBound === '1') {
+            return;
+        }
+
+        deleteButton.addEventListener('click', () => {
+            const id = Number(deleteButton.dataset.deviceTypeId || '0');
+            if (id <= 0) {
+                return;
+            }
+
+            if (window.confirm('Diesen Gerätetyp wirklich löschen? Alle zugeordneten Geräte werden angepasst.')) {
+                // TODO: Delete-Endpoint/Flow ist noch nicht implementiert.
+                window.alert('Löschen noch nicht implementiert');
+            }
+        });
+
+        deleteButton.dataset.deleteBound = '1';
+    }
+
+    function init() {
+        bindAddPortRowButton();
+        bindDeleteButton();
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();
diff --git a/app/modules/device_types/edit.php b/app/modules/device_types/edit.php
index fa4373a..981b826 100644
--- a/app/modules/device_types/edit.php
+++ b/app/modules/device_types/edit.php
@@ -304,6 +304,12 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
                     </tbody>
                 </table>
                 <input type="hidden" id="shape-port-options" value="<?php echo htmlspecialchars(json_encode(array_values(array_column($ports, 'name'))), ENT_QUOTES); ?>">
+                <template id="port-type-options-template">
+                    <option value="">- Kein Typ -</option>
+                    <?php foreach ($portTypes as $pt): ?>
+                    <option value="<?php echo (int)$pt['id']; ?>"><?php echo htmlspecialchars($pt['name']); ?></option>
+                    <?php endforeach; ?>
+                </template>
 
                 <div class="port-actions">
                     <button type="button" class="button" id="add-port-row">+ Port hinzufügen</button>
@@ -319,73 +325,17 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
             <button type="submit" class="button button-primary">Speichern</button>
             <a href="?module=device_types&action=list" class="button">Abbrechen</a>
             <?php if ($isEdit): ?>
-                <a href="#" class="button button-danger" onclick="confirmDelete(<?php echo $deviceTypeId; ?>)">Löschen</a>
+                <button
+                    type="button"
+                    class="button button-danger"
+                    id="device-type-delete"
+                    data-device-type-id="<?php echo (int)$deviceTypeId; ?>">
+                    Löschen
+                </button>
             <?php endif; ?>
         </fieldset>
 
     </form>
 </div>
-
-
-<script>
-function addPortRow() {
-    const body = document.getElementById('port-definition-body');
-    if (!body) {
-        return;
-    }
-
-    const emptyRow = body.querySelector('tr td em');
-    if (emptyRow) {
-        emptyRow.closest('tr').remove();
-    }
-
-    const rowCount = body.querySelectorAll('tr').length;
-    const index = rowCount;
-    const number = rowCount + 1;
-
-    const portTypeOptions = `<?php
-        $optionHtml = '<option value="">- Kein Typ -</option>';
-        foreach ($portTypes as $pt) {
-            $optionHtml .= '<option value="' . (int)$pt['id'] . '">' . htmlspecialchars($pt['name'], ENT_QUOTES) . '</option>';
-        }
-        echo str_replace('`', '\`', $optionHtml);
-    ?>`;
-
-    const row = document.createElement('tr');
-    row.innerHTML = `
-        <td>${number}</td>
-        <td>
-            <input type="hidden" name="port_rows[${index}][id]" value="">
-            <input type="text" name="port_rows[${index}][name]" value="" placeholder="z.B. Gi1/0/1">
-        </td>
-        <td>
-            <select name="port_rows[${index}][port_type_id]">
-                ${portTypeOptions}
-            </select>
-        </td>
-        <td>
-            <label class="inline-checkbox">
-                <input type="checkbox" name="port_rows[${index}][delete]" value="1">
-                entfernen
-            </label>
-        </td>
-    `;
-    body.appendChild(row);
-}
-
-function confirmDelete(id) {
-    if (confirm('Diesen Gerätetyp wirklich löschen? Alle zugeordneten Geräte werden angepasst.')) {
-        // TODO: AJAX-Delete implementieren
-        alert('Löschen noch nicht implementiert');
-    }
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    const addButton = document.getElementById('add-port-row');
-    if (addButton) {
-        addButton.addEventListener('click', addPortRow);
-    }
-});
-</script>
-
 <script src="/assets/js/device-type-shape-editor.js" defer></script>
+<script src="/assets/js/device-type-edit-form.js" defer></script>