CODEWITHSUNDEEP
javascriptjqueryhtmldropdown
I Love Stackoverflow
I Love Stackoverflow

Reputation: 6868

Unable to add and remove dynamically generated dropdown

I want to generate dynamic Dropdown in this format:

 <div class="row"> //first row containing 2 dynamic Dropdown 
                <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                 <select id="field1">
                </div>
                <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                 <select id="field1">
                </div>
 </div>
 <div class="row"> //second row containing 2 dynamic Dropdown 
                <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                 <select id="field2">
                </div>
                <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                 <select id="field2">
                </div>
 </div>

Etc......

Output Format:

enter image description here

Note:I want remove button at the end of each row

 var cnt = 1;
function AddRow() {
        var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper3 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper4 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "'  name='drpdownCourseNm" + cnt + "'  />");
        var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "'  name='drpdownSubCourseNm" + cnt + "'  />");
        var fName3 = $("<select class='fieldname' id='drpdownSubject" + cnt + "'  name='drpdownSubjectNm" + cnt + "'  />");
        var removeButton = $("<img class='remove' src='../remove.png' />");

        fieldWrapper1.append(fName1);
        fieldWrapper2.append(fName2);
        fieldWrapper3.append(fName3);
        fieldWrapper4.append(removeButton);
        $("#FieldContainer").append(fieldWrapper1);
        $("#FieldContainer").append(fieldWrapper2);
        $("#FieldContainer").append(fieldWrapper3);
        $("#FieldContainer").append(fieldWrapper4);
        cnt = cnt + 1;
    }

  $(document).on('click', "img.remove", function () {
        $(this).parent().fadeOut(1000, function () {
            var id = $(this).attr("id").substr(5);
            
            $(this).remove();
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <div class="row" id="FieldContainer">
   </div>
<a onclick="AddRow()" href="#">+ Add </a>

Remove button is also not removing the whole row.when i click on remove button then only that whole row(Containing 2 dropdown) should be removed.

Upvotes: 1

Views: 1066

Answers (4)

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

You may want to do it like this:

http://jsfiddle.net/4gsnewbv/

Your JS:

.......


    fieldWrapper1.append(fName1);
    fieldWrapper2.append(fName2);
    fieldWrapper3.append(fName3);
    fieldWrapper4.append(removeButton);
    var newRow = $('<div class="row" id=""></div>');


    $(newRow).append(fieldWrapper1);
    $(newRow).append(fieldWrapper2);
    $(newRow).append(fieldWrapper3);
    $(newRow).append(fieldWrapper4);
    $("body").append(newRow); // I am assuming it will be a direct child of body. If not, use the appropriate ID or Class
......

So each time you add a row of dropdowns, it'be nested inside 

<div class="row" id="">
    ...Your dropdowns and image goes here...
</div>

So in all it looks similar to 

<body>
    <div class="row" id="">
       ...Your dropdowns and image goes here...
    </div>

    <div class="row" id="">
       ...Your dropdowns and image goes here...
    </div>

    and so on...     

</body>

And then use the jQuery closest selector to find the parent with class row and delete that particular row.

 $(document).on('click', "img.remove", function () {
    $(this).closest(".row").fadeOut(1000, function () {  //targets the entire row of dropdowns
        var id = $(this).attr("id").substr(5);

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

Edit: If you want new rows before your Add Button:

....
   $(newRow).insertBefore($(".add-more").parent()); 
....

Upvotes: 2

artsylar
artsylar

Reputation: 2678

If you want to add a row with two dropdowns and remove button every time the user clicks on "Add", you may try the following. (https://jsfiddle.net/0npzqr1a/4/)

var cnt = 1;
function AddRow() {

        var rowWrapper = $('<div class="row" id="FieldContainer"></div>');

        var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12'/>");
        var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12'/>");
        var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "'  name='drpdownCourseNm" + cnt + "'  />");
        var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "'  name='drpdownSubCourseNm" + cnt + "'  />");
        var removeButton = $("<img class='remove' src='../remove.png' />");

        fieldWrapper1.append(fName1);       
        fieldWrapper2.append(fName2);
        rowWrapper.append(fieldWrapper1);
        rowWrapper.append(fieldWrapper2);
        rowWrapper.append(removeButton);

        $("#FieldContainer").append(rowWrapper);
        cnt = cnt + 1;
    }

  $(document).on('click', "img.remove", function () {
        $(this).closest('.row').fadeOut(1000, function () {
            var id = $(this).attr("id").substr(5);

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

  $(document).on('click', "a#add", function () {
        AddRow();
    });

And the html,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row" id="FieldContainer">
</div>
<a id="add" href="#">+ Add </a>

Upvotes: 1

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

You can use html template to do add and remove elements.

For this you need to just create a html template for your need.

<script type="text/template" id="rowtemplate">
        <div class="select-row row">
            <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                <select id="field1"></select>
            </div>
            <div class="col-md-3 col-xs-12 col-sm-12  form-group">
                <select id="field1"></select>
            </div>
            <div>
                <a class="removeBtn">Remove</a>
            </div>
        </div>
    </script>

Now you can simply add or remove each row.

Your add function will be look like this,

<script>
    function AddRow() {
        $('#FieldContainer').append($('#rowtemplate').html());
    }
</script>

You can see that I have mentioned a class name for remove button in template. So, we can just handle click event of each remove button and remove it's html elements.

$(document).ready(function () {
    // click event for all remove button
    $('body').on('click', '.removeBtn', function () {
        $(this).closest('.select-row').remove();
    });
});

You can see that how simple is add and remove when you use a html template. Then why should you go with any other ways.

Hope this will help you. If you have any queries please comment.

Upvotes: 1

Omidam81
Omidam81

Reputation: 1917

var cnt = 1;
function AddRow() {
        var fieldWrapper1 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper2 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper3 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fieldWrapper4 = $("<div class='col-md-4 col-xs-12 col-sm-12' id='field" + cnt + "'/>");
        var fName1 = $("<select class='fieldname' id='drpdownCourse" + cnt + "'  name='drpdownCourseNm" + cnt + "'  />");
        var fName2 = $("<select class='fieldname' id='drpdownSubCourse" + cnt + "'  name='drpdownSubCourseNm" + cnt + "'  />");
        var fName3 = $("<select class='fieldname' id='drpdownSubject" + cnt + "'  name='drpdownSubjectNm" + cnt + "'  />");
        var removeButton = $("<img class='remove' src='http://icons.iconseeker.com/png/fullsize/web-development-3/action-delete-sharp-thick.png' />");

        fieldWrapper1.append(fName1);
        fieldWrapper1.append(fName2);
        fieldWrapper1.append(fName3);
  fieldWrapper1.append(removeButton.clone());
        
        $("#FieldContainer").append(fieldWrapper1);
        $("#FieldContainer").append(fieldWrapper2);
        $("#FieldContainer").append(fieldWrapper3);
        $("#FieldContainer").append(fieldWrapper4);
        cnt = cnt + 1;
    }

  $(document).on('click', "img.remove", function () {
        $(this).parent().fadeOut(1000, function () {
            var id = $(this).attr("id").substr(5);
            
            $(this).remove();
        });
    
    });
AddRow();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <div class="row" id="FieldContainer">
   </div>
<a onclick="AddRow()" href="#">+ Add </a>

Upvotes: 1

Related Questions