Jquery .On('click') is being uncooperative

Question

I have a delete button that is generated inside of a div. When clicked I want it to delete the itself and the div and everything inside of it.

$('#geography-save').click(function () {
    $('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function(){
    $('.remove-save').on('click', function () {
        alert('test');
        $(this).parent('div').remove();
    });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>

<div class="selected-criteria"></div>

Answer 1

Just use jQuery's on() method like this:

$('body').on('click', '.remove-save', function () { ... });

You should bind the event to a parent which already exists if the content is generated dynamically inside the DOM structure!

$('#geography-save').click(function () {
    $('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function(){
    $('body').on('click', '.remove-save', function () {
        alert('test');
        $(this).parent('div').remove();
    });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>

<div class="selected-criteria"></div>

Answer 2

As your button is dynamically generated, you can access it only based on a static element - so you can use this:

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

See demo below:

$('#geography-save').click(function() {
  $('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function() {
  $('body').on('click', '.remove-save', function() {
    $(this).parent('div').remove();
  });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>

<div class="selected-criteria"></div>