Remove() function is not working in javascript

Question

Here I am trying to add and remove textboxes dynamically in my html. The textboxes are addes successfully but my remove function is not working

Please tell me why this function is not working

  var counter = 2;
    $(document).ready(function () {

    $("#addButton").click(function () {
        if (counter > 5) {
            alert("Limit Exceeds");
            return false;
        }
        var $wrap = $('#TextBoxesGroup');
        var dynamichtml = '<div class="mcity"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/>  </div><div class="mcity"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 1 + '" class="auto"/> </div><div class="mcity"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 11 + '" class="auto"/> </div>';
        $wrap.append(dynamichtml);
        counter++;
    });

    $("#removeButton").click(function () {
        if (counter == 1) {
            alert("No more textbox to remove");
            return false;
        }

        counter--;
        $("#TextBoxesGroup").find("#divleft_" + counter).remove();
        $("#TextBoxesGroup").find("#divright_" + counter).remove();


    });

Answer 1

Here is My JSFiddle link

var counter = 1;
$(document).ready(function () {

$("#addButton").click(function () {
    if (counter > 5) {
        alert("Limit Exceeds");
        return false;
    }
    var $wrap = $('#TextBoxesGroup');
    var dynamichtml = "<div id='divleft_"+(counter)+"' ><div class='mcity' ><label> Leaving from</label><input type='text' name='textbox" + counter + "' id='textbox" + counter + "' class='auto'/>  </div><div class='mcity'> <label> Going to</label>  <input type='text' name='textbox" + counter + "' id='textbox"+ counter + 1 + "' class='auto'/> </div><div class='mcity'> <label> Going to</label>  <input type='text' name='textbox" + counter + "' id='textbox" + counter + 11 + "' class='auto'/> </div></div>";
    $wrap.append(dynamichtml);
    counter++;
});

$("#removeButton").click(function () {
    if (counter == 1) {
        alert("No more textbox to remove");
        return false;
    }
    counter--;
    $("#TextBoxesGroup").find("#divleft_" + counter).remove();
});
});

Answer 2

I think you want to achieve this

var counter = 1;


$("#addButton").click(function () {
    if (counter > 5) {
        alert("Limit Exceeds");
        return false;
    }
    var $wrap = $('#TextBoxesGroup');
    var dynamichtml = '<div class="box"><div class="mcity"><label> Leaving from</label><input type="text" name="textbox' + counter + '" id="textbox' + counter + '" class="auto"/>  </div><div class="mcity"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 1 + '" class="auto"/> </div><div class="mcity"> <label> Going to</label>  <input type="text" name="textbox' + counter + '" id="textbox' + counter + 11 + '" class="auto"/> </div></div>';
    $wrap.append(dynamichtml);
    counter++;
});

$("#removeButton").click(function () {
    if (counter == 1) {
        alert("No more textbox to remove");
        return false;
    }

    counter--;
    console.log(counter)
    $("#TextBoxesGroup div.box:last-child").remove();



});

Please check this fiddle

Answer 3

You are searching for ids that don't seem to exist.

$("#TextBoxesGroup").find("#divleft_" + counter).remove();
$("#TextBoxesGroup").find("#divright_" + counter).remove();

I think you probably just meant to wrap your dynamichtml in a <div> tag like this:

<div id='divleft_"+counter+"' >

Answer 4

From the above question I understood and I developed this, check it once

[http://jsfiddle.net/UDq9W/][1]

Okay @Azad chouhan