jQuery事件与DOM操作

// 确保DOM完全加载完毕
$(document).ready(function() {
    // 为所有具有class="edit"的元素添加click事件监听器
    $('.edit').on('click', function() {
        // 获取当前元素的父元素
        var $parent = $(this).parent();
        // 找到并存储当前元素的兄弟元素（文本和删除按钮）
        var $textSibling = $(this).siblings('.text');
        var $deleteSibling = $(this).siblings('.delete');
        // 创建输入框并将当前文本值设置为输入框的值
        var $input = $('<input>').val($textSibling.text());
        // 用输入框替换文本和删除按钮
        $parent.append($input);
        $textSibling.remove();
        $deleteSibling.remove();
        // 聚焦输入框
        $input.focus();
        // 为输入框添加blur事件监听器，当输入框失去焦点时执行
        $input.on('blur', function() {
            // 获取输入框的值并清除输入框
            var newText = $(this).val();
            $(this).remove();
            // 创建新的文本元素和删除按钮并添加回父元素
            var $newText = $('<span>').addClass('text').text(newText);
            var $newDelete = $('<button>').addClass('delete').text('Delete');
            $parent.append($newText).append($newDelete);
            // 移除blur事件监听器
            $(this).off('blur');
        });
    });
});

这段代码首先确保在DOM完全加载后执行。然后，为所有class为"edit"的元素添加了click事件监听器。当edit按钮被点击时，它会获取当前元素的父元素，找到文本和删除按钮的兄弟元素，并创建一个新的输入框替换它们。在输入框获取焦点后，当输入框失去焦点时，它会将输入框的值设置为文本元素，并移除输入框和删除按钮，并将它们重新添加回父元素中。最后，它移除了为输入框添加的blur事件监听器。