javascript - 从表单中添加和删除元素，第一次单击有效，后续单击无效

Question

我正在尝试根据表单前一部分中的复选框向表单添加/删除元素。我的问题是，当用户第一次单击 checkContact 中的任何内容时，表单会正确附加。如果用户取消选中该框，它将被正确删除。当用户重新单击该复选框时，不会添加该元素。

 $('.checkContact').click(function(){
    var addInfo = "<div class='middleRow'><input type='text' id='"+val+"_name[]' name='"+val+"'_name[]'></div>";
    if($(this).is(':checked'))
    {
            alert(addInfo);
            $('#'+divId).append(addInfo);
    }
    else
    {
            $('#'+divId).detach();
            // i have also tried .remove();
    }

fiddle : Fiddle

Answer 1

在 else 部分中，您将从 dom 树中删除元素 $('#' + divId)，而不是删除其内容。您只需清空容器元素，因为在 if block 中您要将目标标记添加到容器元素。

$('.checkContact').click(function () {
    var val = $(this).val();
    var divId = val + '_div';
    var addInfo = "<div class='middleRow'><input type='text' id='" + val + "_name[]' name='" + val + "'_name[]'></div>";
    if (this.checked) {
        //alert(addInfo);
        $('#' + divId).html(addInfo);
    } else {
        //you are removing the container instead of removing its content
        $('#' + divId).empty();
    }
});

演示:Fiddle