在前端開發中，我們常常會遇到需要在輸入框中添加刪除按鈕的情況，接下來我們將介紹如何使用jQuery來實現這個功能。

$(function() {  // 文檔準備好之后執行
$('input[type="text"]').each(function() {  // 遍歷每個文本輸入框
// 創建刪除按鈕并添加樣式
var removeBtn = $('<i class="fas fa-times-circle"></i>').css({
'position': 'absolute',
'right': '5px',
'top': '50%',
'transform': 'translateY(-50%)',
'cursor': 'pointer'
});
// 將刪除按鈕添加到輸入框同級的父元素中
$(this).parent().append(removeBtn);
// 當輸入框獲得焦點時，顯示刪除按鈕
$(this).on('focus', function() {
removeBtn.show();
});
// 當輸入框失去焦點時，隱藏刪除按鈕
$(this).on('blur', function() {
removeBtn.hide();
});
// 點擊刪除按鈕時，清空輸入框內容并隱藏刪除按鈕
removeBtn.on('click', function() {
$(this).siblings('input[type="text"]').val('').focus();
$(this).hide();
});
});
});

以上代碼中，我們首先通過選擇器選中所有的文本輸入框，然后使用jQuery的each方法遍歷每個輸入框。在循環中，我們使用jQuery創建了一個刪除按鈕，并將其添加到輸入框同級的父元素中。接著，我們給輸入框綁定了focus和blur事件，當輸入框獲得焦點時，顯示刪除按鈕，失去焦點時，隱藏刪除按鈕。最后，我們給刪除按鈕綁定了click事件，當點擊刪除按鈕時，清空輸入框內容并隱藏刪除按鈕。

使用上述代碼，我們可以輕松地給文本輸入框添加刪除按鈕，提高用戶的交互體驗。