Question

我正在尝试通过单击添加更多按钮来增加字段数，并且我成功地这样做了。但是，当我尝试检查复选框并单击删除按钮时，它不会发生任何帮助将感谢全部。

jQuery的：

$(document).ready(function () 
{
    var x = 0;
    $('#addmore').click(function (e) 
    {
        e.preventDefault();
        if(x<5)
        {
            $("#Files").append("<div id='dummy'></div><input name='file' id='file" + x + "' type='file'/>");
            $("#Files").append("<input  value='remove' id='but" + x + "' data-id='" + x + "' type='checkbox'/>");
        }
        else
        {
            alert("max 5 images to be uploaded");
        }
        x++;
    });

    $("#imageForm").on('click', 'input[value="Delete"]' , function () 
    {
        var id = $(this).data('id');
        if($(this).is('checked'))
        {
            $("#file" + id).add(this).add("#dummy").remove();
        }
    });
});

HTML：

<form name="imageForm" id="imageForm" method="post" enctype="multipart/form-data" action="imageuploadlogic.jsp">
    <input type="button" id="addmore" value="addmore"/><input type="button" id="Delete" value="Delete"/>
    <div style="clear: both;"></div>
    <div id="Files"></div>
    <div style="clear: both;"></div>
    <input type="submit" id="submitimage" />
</form>

Answer 1

不使用dummy div来分隔新元素集，而是将div中的所有文件和复选框元素包装起来，如下所示。

$('#addmore').click(function (e) {
    e.preventDefault();
    var len = $("#Files > .ct").length;
    if (len < 5) {
        $("#Files").append("<div class='ct'><input name='file' type='file'/><input  value='remove' type='checkbox'/></div>");
    } else {
        alert("max 5 images to be uploaded");
    }
});
$("#imageForm").on('click', 'input[value="Delete"]', function () {
    $('#Files div.ct').has('input:checkbox:checked').remove()
});

然后使用.has（）方法查找带有复选框的ct元素并将其删除

演示：Fiddle

Answer 2

试试我的工作答案：

JSFiddle

$(document).ready(function () {
        var x = 0;
        $('#addmore').click(function (e) {
            e.preventDefault();
            if(x<5){
            $("#Files").append("<div id='dummy'></div><input name='file' id='file" + x + "' type='file'/>");
            $("#Files").append("<input  value='remove' id='but" + x + "' data-id='" + x + "' type='checkbox'/>");
            }
            else{
                alert("max 5 images to be uploaded");
            }
            x++;
        });
        $("#imageForm").on('click', 'input[value="Delete"]' , function () {
            var id = $(this).data('id');
            $('input[type="checkbox"]:checked').each(function(){
           $(this).add($(this).prev()).remove();
            });
        });

    });

如果它有帮助，请将其标记为答案！

Answer 3

这是你的另一个元素问题的解决方案。您必须使用相同的方法删除元素。

工作示例：Demo

HTML代码：

<input name="" type="checkbox" value="" id="imageForm">
    <div id="file">this is paragraph</div>

JS代码

$("#imageForm").change(function() {
            if( $(this).prop('checked') ){
                $("#file").remove();
            }
        });

使用jquery选中复选框时如何删除

3 个答案: