Question

我使用以下代码根据下拉列表中的用户输入动态创建一组复选框。当用户从下拉列表中选择另一个选项时，它不会删除先前的选择。

它只删除复选框，但不删除复选框附带的说明。我无法找到代码中的错误。感谢您的帮助。

 $(document).ready(function() {

    $('#sel_LearnA').change(function(event) {  

    var $learnA=$("select#sel_LearnA").val();

$.get('actionDataSelect',{LAreaID:$learnA},function(responseJson) {   

    // remove existing checkboxes
    $('#somediv').children().remove();

    // add checkboxes to the div
    $.each(responseJson, function(index, item) { // Iterate over the JSON array.
        $('#somediv').append("<input type='checkbox' value='"+ item.keyCode + "' />" + item.keyCode + "</br>");
    });
});

    });

});

我的jsp看起来像，

<div id="somediv"></div>

Answer 1

.children()只获取父节点的元素节点，而不是文本节点

尝试清空（）

$('#somediv').empty();

或只是.html（''）

$('#somediv').html('');

Answer 2

空功能重置div。

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

Answer 3

这不是代码中的错误。

该说明没有附在复选框上。

$('#somediv').append("<input type='checkbox' value='"+ item.keyCode + "' />" + item.keyCode + "</br>");

您正在关闭复选框，之后会给出说明。因此.remove将删除复选框，而不是描述。

将复选框和说明放在标签内，然后删除标签。

这肯定会奏效。

$('#somediv').append("<label><input type='checkbox' value='"+ item.keyCode + "' />" + item.keyCode + "</label></br>");

删除动态添加到div的复选框

3 个答案: