CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Rohan Krishna
Rohan Krishna

Reputation: 417

How to remove input group in bootstrap?

This is what I have right now. I'm trying to add fields to the form dynamically using jQuery add() and append() method. But I want to remove the particular added field when the remove button is clicked.

<div class="col-md-12">
    <h3>Added Description Fields</h3>

    <div class="col-md-12" id="descFields">

    </div>
</div>

JS

$(document).ready(function() {

    console.log(descFields);



    $('#addDesc').click(function(e) {

        var descFields = $('#descFields');

        var descLabel = $('#descLabel').val();

        var large = '<div class="form-group" id="descField"><div class="input-group"><input type="text" class="form-control" placeholder="Enter Value For ' + descLabel + '" /><span class="input-group-btn"><button class="btn btn-danger" id="removeDesc" type="button">Remove</button></span></div>';

        descFields.add(large).appendTo(descFields);

        e.preventDefault();

    });

    $('#removeDesc').click(function(e) {

        $(this).remove();


    });
});

When the user click on the #removeDesc button , the the field that is added should be removed. I cannot figure out how to achieve this.

Upvotes: 0

Views: 1810

Answers (2)

rdgfuentes
rdgfuentes

Reputation: 346

There are many ways of doing this, but the simpler for your problem is this one:

$(document).ready(function() {

    console.log(descFields);



    $('#addDesc').click(function(e) {

        var descFields = $('#descFields');

        var descLabel = $('#descLabel').val();

        var large = '<div class="form-group" id="descField"><div class="input-group"><input type="text" class="form-control" placeholder="Enter Value For ' + descLabel + '" /><span class="input-group-btn"><button class="btn btn-danger" id="removeDesc" type="button">Remove</button></span></div>';

        descFields.add(large).appendTo(descFields);

        e.preventDefault();

    });

    $('#descFields').on('click', '#removeDesc', function(e) {
        $(this).parents('.form-group').remove();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="descLabel"/>
<button id="addDesc">Add Desc</button>

<div class="col-md-12">
    <h3>Added Description Fields</h3>

    <div class="col-md-12" id="descFields">

    </div>
</div>

Your problem is in the callback to delete the rows. When the document has finished loading you are trying to attach a click event to an object #removeDesc that is still not present in the DOM because it's created on the fly when the user clicks the #addDesc. That's why you should use:

$('#descFields').on('click', '#removeDesc', function(e) {
    $(this).parents('.form-group').remove();
});

As @vijayP suggested before you can use the on() to attach an event handler to the container where you'll be adding the object that is still not present in the DOM. Then you pass in the query selector as the second parameter to filter in execution time which of its children will trigger the event and execute the callback.

My additional trick is that I'm using .parents('.form-group') to select the div containing the group and remove all of the fields that were added instead of removing only the button.

Happy coding!

Upvotes: 1

vijayP
vijayP

Reputation: 11502

Add click event for remove button like follows:

    $(document).on("click","#removeDesc",function(e) {

        $(this).remove();
     });

Upvotes: 1

Related Questions