資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 jQuery 和 Bootstrap 動態新增和刪除輸入欄位？
隨著複雜且以使用者為中心的 Web 應用程式的開發，動態新增和刪除輸入欄位的能力對於開發者而言變得至關重要。透過結合 jQuery 和 Bootstrap 的強大功能，開發者可以建立響應迅速的使用者介面，即時響應使用者輸入。使用 jQuery 和 Bootstrap 動態新增和刪除輸入欄位的過程可能看起來令人生畏；但是，透過深刻理解其固有的語法和引數，可以輕鬆實現。本文深入探討了使用 jQuery 和 Bootstrap 動態新增和刪除輸入欄位的分步方法，涵蓋了開發人員在整個過程中可用的各種自定義選項。
語法
$(selector).click(function);
在 jQuery 中，“click”方法將事件處理程式與 JavaScript 的“click”事件關聯，或在特定元素上觸發該事件。
$(selector).append(content)
jQuery 中的 .append() 方法用於將內容附加到特定元素的末尾。此方法能夠在選定元素中包含 HTML、文字或其他元素。
$(selector).remove();
jQuery 框架中的 .remove() 方法能夠刪除選定的元素，以及文件物件模型 (DOM) 中的任何關聯子節點和內容。此外，此方法還可以刪除與已刪除元素關聯的關聯事件處理程式和資料。成功執行此方法後，目標元素將從 DOM 中刪除，因此無法進一步訪問或控制。此方法可以在包含一個或多個選定元素的 jQuery 物件上觸發。
$(selector).parent();
在 jQuery 中，parent() 方法選擇所選元素的直接父元素。它可以用於遍歷 DOM 樹並根據其與所選元素的關係選擇特定的父元素。
方法
我們將使用上述 jQuery 方法，即 .append() 和 .remove() 方法，動態新增和刪除輸入欄位，同時整合 Bootstrap 框架。為了新增輸入欄位，我們將使用 .append() 方法，而為了刪除它，我們將呼叫 .remove() 方法。此外，我們將使用另外兩種方法，即 .click() 和 .parent()，分別來管理 onclick 事件和查詢元素的祖先。
示例
以下示例包含一個表單，該表單包含一個未填充的 div 容器、“刪除輸入”按鈕和“新增輸入”按鈕。最初，“刪除輸入”按鈕不可用。單擊“新增輸入”按鈕時，使用 append() 函式將新的輸入欄位動態新增到 div 中，“刪除輸入”按鈕將被啟用。要刪除輸入欄位，請單擊“刪除輸入”按鈕，然後選擇祖先元素（即輸入欄位），並使用 parent() 和 remove() 函式將其從文件物件模型 (DOM) 中刪除。程式碼的指令碼部分使用 jQuery 來實現此功能。
<!DOCTYPE html>
<html>
<head>
<title>How to add and remove input fields dynamically using jQuery with Bootstrap?</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h4>How to add and remove input fields dynamically using jQuery with Bootstrap?</h4>
<form>
<div class="form-group" id="input-container"></div>
<br/>
<button class="remove-input">Remove Input</button>
</form>
<br/>
<button id="add-input">Add Input</button>
<script>
$("#add-input").click(function () {
$("#input-container").append('<input type="text" class="form-control">');
});
$(".remove-input").click(function () {
$(this).parent().remove();
});
</script>
</body>
</html>
結論
總之，使用 jQuery 和 Bootstrap 動態新增和刪除輸入欄位可以顯著改善使用者體驗並最佳化網站或應用程式的資料收集過程。透過實施本文中闡述的方法，程式設計師可以設計靈活且可根據使用者需求調整的表單。能夠隨時新增或刪除欄位使使用者能夠方便地輸入所需資訊，而不會受到多餘輸入選項的干擾。將這些方法整合到您的開發工作流程中可以產生更有效且使用者友好的網站或應用程式，從而帶來更好的使用者體驗。
3K+ 次瀏覽
