JQuery动态删除按钮

Question

我正在添加基于数组的按钮。我遇到的问题是每次我向数组添加另一个名称时，它会打印出所有按钮，而不仅仅是我添加的按钮。我想知道在添加按钮数组之前如何擦除所有旧按钮。

这是我的代码

        socket.on('usernames', function(data){
        console.log(data);
        for(i=0; i <data.length; i++){
            // html += data[i] + "<br/>";
            $input = $('<input type="button"/></br>');
            $input.val(data[i]);
            $input.appendTo($("#contentWrap"));
        }
        // $users.html(html);
    });

下面是一张图片。 Test是第一个按钮的名称，每次添加新按钮时，它都会再次打印整个数组。有没有办法删除旧按钮？

Answer 1

循环前使用empty()方法：

socket.on('usernames', function(data){
    var $contentWrap = $("#contentWrap").empty();

    for (i = 0; i < data.length; i++) {
        $input = $('<input type="button"/></br>');
        $input.val(data[i]);
        $input.appendTo($contentWrap);
    }
});

另请注意，您可以通过创建单个HTML字符串并将html()属性设置为仅需要一个DOM调用来提高性能并整理代码。试试这个：

socket.on('usernames', function(data){
    var html = data.map(function(value) {
        return '<input type="button" value="' + value + '"/></br>'
    }).join('');
    $('#contentWrap').html(html);
});

Answer 2

在再次附加元素之前，您可以在父元素上调用.empty()。

$("#contentWrap").empty();

for(i=0; i <data.length; i++){
    // html += data[i] + "<br/>";
    $input = $('<input type="button"/></br>');
    $input.val(data[i]);
    $input.appendTo($("#contentWrap"));
}