how to delete when check box is checked using jquery

Question

I am trying to increase the number of fields by clicking the add more button and I am successful in doing that. But, when i try to check the check box and click on delete button it wont happen any help will be thank full.

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

Instead of using a dummy div to separate the new element set, wrap all file and checkbox elements in a div as shown below.

$('#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()
});

Then use the .has() method to find the ct elements with checked checkboxes and remove them

Demo: Fiddle

Answer 2

Try out my working answer:

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

    });

Mark it as answer if it helps !

Answer 3

here is the solution of your problem with another element. You have to use the same method to delete the elements.

Working Example: Demo

HTML Code:

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

JS Code

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