javascript - 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);
});