remove whole div using jquery

Question

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...

You just need jquery [bindings](https://api.jquery.com/on/) .. I wonder how many duplicates of this question exist in SO — rafaelcastrocouto, May 09 '14 at 17:57

Ehsan Sajjad · Answer 1 · 2014-05-09T18:06:35.577

1

Use delegated event as html is added after the DOM loaded see delegated events:

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

edited May 09 '14 at 18:06

answered May 09 '14 at 17:56

Ehsan Sajjad

60,736
15
100
154

Dave · Accepted Answer · 2014-05-09T18:06:15.150

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();
     });
   }

This could behave strangely if there are multiple elements with class `remove`. — Felix Kling, May 09 '14 at 18:04
This works perfectly. i tested it wilth multiple elements too. — Dave, May 09 '14 at 18:10

score 0 · Answer 3 · answered May 09 '14 at 17:56

0

Since the element is added to the DOM via JavaScript you need to use event delegation -

$('body').on('click', '#remove', function (){

answered May 09 '14 at 17:56

Jay Blanchard

33,530
16
73
113

remove whole div using jquery

3 Answers3