CODEWITHSUNDEEP
javascriptjqueryhtml
Karan Tongay
Karan Tongay

Reputation: 207

Dynamically created select2 not getting removed on button click

I need to generate and remove the select2 dynamically.

Now, I am successfully able to add select2 on a button click, but I also need to remove the dynamically created select2 when the user clicks on 'remove' button.

As of now, only dynamically generated text-box is getting removed which is beside the select2 which I am accessing using its id.

I have tried accessing the class as well as id associated with the 'select' which I had converted into select2, but still the select2 were not getting removed.

Following is the script:

var container = $(document.createElement('div')).css({
        padding: '5px', margin: '20px', width: '400px', border: '1px solid',
        borderTopColor: '#999', float: 'left', borderBottomColor: '#999',
        borderLeftColor: '#999', borderRightColor: '#999'
    });

var iCnt = 0;
function add()
{
        if (iCnt <= 19) {

            iCnt = iCnt + 1;

    $(container).append($("<select class ='selinput' id=tb" + iCnt + " " + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'>")); 

    //Add Property Selector

    $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");     
    $(container).append($("<select class ='selinput2" + iCnt + "'' id=tb2" + iCnt + " " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>"));
    //$('.selinput2' + iCnt).select2({width : '20%'});
    $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");     
            // ADD TEXTBOX.
            $(container).append('<input type=text class="input" id=tbtext' + iCnt + ' ' +
                        'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br>');


            // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
            if (iCnt == 1) {

                var divSubmit = $(document.createElement('div'));
                $(divSubmit).append('<input type=button class="bt"' + 
                    'onclick="GetTextValue()"' + 
                        'id=btSubmit value=Submit />');

            }

            // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
            $('#main').after(container, divSubmit);

            // Initialize select2
                        $('select').select2({width : '20%'});   
        }

        // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
        // (20 IS THE LIMIT WE HAVE SET)
        else {
            $(container).append('<label>Reached the limit</label>'); 
            $('#btAdd').attr('class', 'bt-disable'); 
            $('#btAdd').attr('disabled', 'disabled');
        }
    }
function remove() {
        if (iCnt != 0) { 

    console.log($(container).closest());

    $('#tbtext' + iCnt).remove();
    $('#add' + iCnt).remove();
    //$('select').select2({width : '20%'}).remove();
    $('#tb2' + iCnt).remove();


    iCnt = iCnt - 1; }

        if (iCnt == 0) { 
            $(container)
                .empty() 
                .remove(); 

            $('#btSubmit').remove(); 
            $('#btAdd')
                .removeAttr('disabled') 
                .attr('class', 'bt');
        }
    }

// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';

Following is the link to jsFiddle:

https://jsfiddle.net/zjafvr3u/4/

Please suggest.

Upvotes: 2

Views: 412

Answers (2)

Bharat Patel
Bharat Patel

Reputation: 197

see here : JSFiddle

what i did was to create all the elements inside a div, which make it easier to remove the whole row at once.

$(container).append('<div class="row"></div>');
    $(".row:last").append("<select class ='selinput' id=tb" + iCnt + " " + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'>");

    //Add Property Selector

    $(".row:last").append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
    $(".row:last").append("<select class ='selinput2" + iCnt + "'' id=tb2" + iCnt + " " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>");
    //$('.selinput2' + iCnt).select2({width : '20%'});
    $(".row:last").append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
    // ADD TEXTBOX.
    $(".row:last").append('<input type=text class="input" id=tbtext' + iCnt + ' ' +
      'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br>');

and while removing, just use the following

$('.row:last').remove();

Upvotes: 2

Sumit patel
Sumit patel

Reputation: 3903

Add one more Class In Css Select2row for using Div .your select2 Dropdown inside this div assign id this div .

See Live Demo Here

Update Css

.Select2row
{
  display:inline;
}

Update Your Script

var container = $(document.createElement('div')).css({
            padding: '5px', margin: '20px', width: '400px', border: '1px solid',
            borderTopColor: '#999', float: 'left', borderBottomColor: '#999',
            borderLeftColor: '#999', borderRightColor: '#999'
        });

var iCnt = 0;
function add()
{
            if (iCnt <= 19) {

                iCnt = iCnt + 1;

        $(container).append($("<div class='Select2row'  id=tb" + iCnt + "  ><select class ='selinput'" + "value='Text Element " + iCnt + "' style='float : left; margin-right:70px;'></div>")); 

        //Add Property Selector

        $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");     
        $(container).append($(" <div class='Select2row' id=tb2" + iCnt + " ><select class ='selinput2" + iCnt + "'' " + "value='Text Element " + iCnt + " ' ><option value='equalto'>A</option><option value='notequalto'>B</option></select>"));
        //$('.selinput2' + iCnt).select2({width : '20%'});
        $(container).append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");     
                // ADD TEXTBOX.
                $(container).append('<input type=text class="input" id=tbtext' + iCnt + ' ' +
                            'placeholder="Value ' + iCnt + '" style="float : center;" /><br><br></div>');


                // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
                if (iCnt == 1) {

                    var divSubmit = $(document.createElement('div'));
                    $(divSubmit).append('<input type=button class="bt"' + 
                        'onclick="GetTextValue()"' + 
                            'id=btSubmit value=Submit />');

                }

                // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
                $('#main').after(container, divSubmit);

                // Initialize select2
                            $('select').select2({width : '20%'});   
            }

            // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
            // (20 IS THE LIMIT WE HAVE SET)
            else {
                $(container).append('<label>Reached the limit</label>'); 
                $('#btAdd').attr('class', 'bt-disable'); 
                $('#btAdd').attr('disabled', 'disabled');
            }
        }
function remove() {
            if (iCnt != 0) { 

        console.log($(container).closest());
        $('#tbtext' + iCnt).remove();
        $('#tb2' + iCnt).remove();
    $('#tb' + iCnt).remove();


        iCnt = iCnt - 1; }

            if (iCnt == 0) { 
                $(container)
                    .empty() 
                    .remove(); 

                $('#btSubmit').remove(); 
                $('#btAdd')
                    .removeAttr('disabled') 
                    .attr('class', 'bt');
            }
        }

    // PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
    var divValue, values = '';

Upvotes: 1

Related Questions