CODEWITHSUNDEEP
javascriptjqueryhtml
Aitazaz Khan
Aitazaz Khan

Reputation: 1605

Remove button not work when changing the structure

I am adding buttons dynamically and it get added perfectly with this code and when i wanna remove the text boxes which user created by click on add more button works perfect.

The code in which button adding and removing perfectly on click event.

Here is the jquery script!.

$(document).ready(function() {

    var MaxInputs       = 8; //maximum input boxes allowed
    var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton       = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount=1; //to keep track of text box added

    $(AddButton).click(function (e)  //on add input button click
    {
        if(x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div class="controls"><input type="text" class="form-control" name="sub-category-name[]" required/><a href="#" class="removeclass">&times;</a></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click",".removeclass", function(e){ //user click on remove text
        if( x > 1 ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    }) 
});

And here is Html.

<div class="form-group" id="InputsWrapper">
    <label for="sub-category-name">Sub Category Name </label>
    <div class="controls">
        <input type="text" class="form-control" id="typeahead"  name="sub-category-name[]" required>
        <a href="#" id="AddMoreFileBox" class="btn btn-info">Add More Field</a>
    </div>
</div>

But when i change the code structue a little bit than user can add the text boxes but can't remove the dynamically added text boxes .
Here is the Html code.

<div class="form-group" id="InputsWrapper">
    <div class="input-group"><input type="text" class="form-control">
        <span class="input-group-btn"> <a href="#" id="AddMoreFileBox"><button class="btn btn-default" type="button">+</button></a> </span>
    </div>

</div>

and here is the script.

$(document).ready(function() {

    var MaxInputs       = 8; //maximum input boxes allowed
    var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
    var AddButton       = $("#AddMoreFileBox"); //Add button ID

    var x = InputsWrapper.length; //initlal text box count
    var FieldCount=1; //to keep track of text box added

    $(AddButton).click(function (e)  //on add input button click
    {
        if(x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div class="input-group"><input type="text" class="form-control"><span class="input-group-btn"> <a href="#" class="btn btn-default removeclass">X</a></span</div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click",".removeclass", function(e){ //user click on remove text
        if( x > 1 ) {
            $(this).parent('div').remove(); //remove text box
            x--; //decrement textbox
        }
        return false;
    }) 
});

Upvotes: 0

Views: 59

Answers (2)

Fenex
Fenex

Reputation: 239

You need: $(this).parent().parent().remove();

In second listing you changed structure HTML, but forgot about JS.

Your HTML was:

div
    a.removeclass

You added listener to a.removeclass, and you walk up the DOM-tree once:

$(this).parent('div').remove();

Your HTML now:

div
    span
        a.removeclass

Now, if you want to remove div, you need walk up the tree twice, but once!

Upvotes: 0

mplungjan
mplungjan

Reputation: 178350

You need to target your parents by tag and/or class name:

$(this).closest("div").remove(); // walk up the DOM until the nearest DIV

or 

$(this).closest("div.form-group").remove(); // walk up to nearest div.form-group

Change form-group to the class of the container you wish to remove if I got the wrong container

Upvotes: 1

Related Questions