jQuery遍历与删除添加节点

$(document).ready(function() {
    // 删除节点
    $('#delete').click(function() {
        $('#myList li:last').remove(); // 删除列表中的最后一个元素
    });
 
    // 在列表顶部添加节点
    $('#prepend').click(function() {
        $('#myList').prepend('<li>新添加的列表项</li>');
    });
 
    // 在列表底部添加节点
    $('#append').click(function() {
        $('#myList').append('<li>新添加的列表项</li>');
    });
 
    // 在选中节点之后添加同级节点
    $('#after').click(function() {
        $('#myList li:last').after('<li>新添加的列表项</li>');
    });
 
    // 在选中节点之前添加同级节点
    $('#before').click(function() {
        $('#myList li:last').before('<li>新添加的列表项</li>');
    });
 
    // 替换节点
    $('#replace').click(function() {
        $('#myList li:last').replaceWith('<li>替换后的列表项</li>');
    });
 
    // 包裹节点
    $('#wrap').click(function() {
        $('#myList li:last').wrap('<div></div>');
    });
 
    // 解包裹节点
    $('#unwrap').click(function() {
        $('#myList li:last').unwrap();
    });
 
    // 克隆节点
    $('#clone').click(function() {
        $('#myList li:last').clone().appendTo('#myList');
    });
});

这段代码展示了如何使用jQuery进行节点的遍历和操作，包括删除、添加、替换、包裹和解包裹节点等。每个按钮点击事件处理函数中都有相应的DOM操作示例。