Q:

remove whole div using jquery

JSBin
var question = 1;

function add_fields() {
  question++;
  var d = document.getElementById("add_question");
  d.innerHTML += "<div id='remove_later'><div>Question Number " + question + " : </div><a id='remove' class='remove' style='color: #FFF; display: inline; float: right; margin-right: 25px;  background: red; padding: 5px 10px;'>Delete Question</a><span><input type='text' class='dynamic_textfields' name='width[]' value='' /></span><br /><label class='answer_left' for='answer_1'>Answer Option 1 :</label><input class='dynamic_answer' type='text' name='answer_1' id='answer_1' /><br /><br /><label class='answer_left' for='answer_2'>Answer Option 2 :</label><input class='dynamic_answer' type='text' name='answer_2' id='answer_2' /><br /><br /><label class='answer_left' for='answer_3'>Answer Option 3 :</label><input class='dynamic_answer' type='text' name='answer_3' id='answer_3' /><br /><br /><label class='answer_left' for='answer_4'>Answer Option 4 :</label><input class='dynamic_answer' type='text' name='answer_4' id='answer_4' /><br /><br /><hr /></div>";
}

$('#remove').click( function (){
    $('#remove_later').remove();
});

I have add some dynamic input fields using javascript code. I want to delete some questions so, I used this jquery code to remove questions $('id').remove();. But, it doesn't work. I don't know where I made a mistake? My full codes on jsbin...

A:

updated jsbin
function add_fields() {
      question++;
      var d = document.getElementById("add_question");
      d.innerHTML += "<div id='remove_later'><div>Question Number " + question + " : </div><a id='remove'   class='remove' style='color: #FFF; display: inline; float: right; margin-right: 25px;  background: red; padding: 5px 10px;'>Delete Question</a><span><input type='text' class='dynamic_textfields' name='width[]' value='' /></span><br /><label class='answer_left' for='answer_1'>Answer Option 1 :</label><input class='dynamic_answer' type='text' name='answer_1' id='answer_1' /><br /><br /><label class='answer_left' for='answer_2'>Answer Option 2 :</label><input class='dynamic_answer' type='text' name='answer_2' id='answer_2' /><br /><br /><label class='answer_left' for='answer_3'>Answer Option 3 :</label><input class='dynamic_answer' type='text' name='answer_3' id='answer_3' /><br /><br /><label class='answer_left' for='answer_4'>Answer Option 4 :</label><input class='dynamic_answer' type='text' name='answer_4' id='answer_4' /><br /><br /><hr /></div>";
     $('.remove').unbind('click');          
     $('.remove').click( function (){
      $(this).closest('div').remove();
     });
   }

