The solution may be obvious, but when clicking the .remove element, I am trying to remove the entire .tag element that is the parent. Currently, clicking the .remove element has no response.

HTML

'<div class="tag"><input id="' + id + '" type="hidden" name="' + name + '" value="' + value + '" />' + input + '<i class="remove dismiss fa fa-remove"></i></div>'

JS

$('.remove').on('click', '.remove', function() {
  $(this).parent().remove();
});

The solution may be obvious, but when clicking the .remove element, I am trying to remove the entire .tag element that is the parent. Currently, clicking the .remove element has no response.

HTML

'<div class="tag"><input id="' + id + '" type="hidden" name="' + name + '" value="' + value + '" />' + input + '<i class="remove dismiss fa fa-remove"></i></div>'

JS

$('.remove').on('click', '.remove', function() {
  $(this).parent().remove();
});

• javascript
• jquery

• Are your elements being added to the page dynamically? – j08691 Commented Jul 16, 2015 at 13:07
• Please post your question with proper format, as this html string looks like html code. – Bhushan Kawadkar Commented Jul 16, 2015 at 13:13

4 Answers 4

Try this : As you are adding remove link dynamically, you need to register click handler using .on(). But in your case you have error in using .on(). Please use below code.

$(document).on('click', '.remove', function() {
    $(this).parent().remove();
});

More Information on jQuery .on()

You can try this:

http://jsfiddle/myyzrwwe/

$('.remove').on('click', function() {
    $(this).parent().remove();
});

You shouldn't always use delegate the event to the same element that has been delegated. You need to select a static parent. In my example, the document object is the parent of everything.

$('body').on('click', '.remove', function() {
    $(this).parent().remove();
});

The problem might be you are binding the event to .remove, if this content is dynamic you might have a problem. Its better, in those cases, to bind to document.

$(document).on()

The callback has the event parameter, use that to remove.

function(e) {
  $(e.currentTarget).parent().remove();
}

Check if you undelegate elements.