javascript - Trying to delete Select box using jQuery remove() function -

i trying delete select box using jquery remove function not work. select box dynamically generated one. want delete same select box if user wants delete dropdown after adding. code is:

    $("#dltelement").click(function() {         $("#idselect").remove();        }); 

my code add select boxes:

$(document).ready(function() {     var count = 3;     $("#btncompare").click(function() {         if (count > 4) {             alert("only 4 options allowed");             return false;         }         $("#form-group").append(             "<select name='idselect" + count + "' id='idselect" + count + "'>" +             "<option>--select product" + counter + "--</option>" +             '<option value="p1">product 1</option>' +             '<option value="p2">product 2</option>' +             "</select>" + '<input type="button" value=" - " id="dltelement' + count + '" class="btn-minus pull-left" />'         );         count++;     }); // script adding dropdown dynamically  }); 

#idselect not present have use #idselect0 or #idselect1 ... , on. rather can lookup events using event delegation on #form-group delete closest element select closest input button or in case sibling select. ~ sibling selector , select sibling select.

a idea add class select , use instead have used class .btn-minus listening click events, (in case if have more 1 select selected)

$("form-group").on('click', '.btn-minus' , function() {      $(this).find('~select').remove();    }); 

find sibling select , remove

edit 2

i have added snippet using .closest() can check out. closest try locate parent div class container , remove select , minus button

$(document).ready(function() {            $("#form-group").on('click', '.btn-minus' , function() {         $(this).closest('.container').remove();         });      $("#btncompare").click(function() {          var count = $("#form-group > div.container").length;          if (count >= 4) {              alert("only 4 options allowed");              return false;          }          //you need have data-id="number" div.container, add class container , data-id divs having select , button          var label = $("#form-group > div.container").last().data('id')*1+1;          $("#form-group").append(              "<div class=container data-id="+label+"><select name='idselect" + label + "' id='idselect" + label + "'>" +              "<option>--select product" + label + "--</option>" +              '<option value="p1">product 1</option>' +              '<option value="p2">product 2</option>' +              "</select>" + ' <input type="button" value=" - " id="dltelement' + label + '" class="btn-minus pull-left" /></div>'          );                }); // script adding dropdown dynamically    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div id="form-group">    <input type=button id=btncompare value=btncompare />    <div class="container" data-id="1">      <select id="idselect1" name="idselect1">        <option>--select product1--</option>        <option value="p1">product 1</option>        <option value="p2">product 2</option>      </select>      <input disabled type="button" class="btn-minus pull-left" id="dltelement1" value=" - ">    </div>        <div class="container" data-id="2">      <select id="idselect2" name="idselect2">        <option>--select product2--</option>        <option value="p1">product 1</option>        <option value="p2">product 2</option>      </select>      <input disabled type="button" class="btn-minus pull-left" id="dltelement2" value=" - ">    </div>  </div>

edit 3:

please find updated snippet. need have data-id="number" div.container, add class container , data-id divs having select , button.

it hard have want since can delete middle well. can have array of deleted objects , update everytime delete or add that. in code have added disbaled input delete 1 , 2 can add , delete other 2. can play around logic.

it counts number of divs in dom , checks if trying add more limit, picks last added in dom , increments data-id use label next select