在jQuery中创建的带有<.onclick>函数的<SPAN>无法正常工作

Question

我试图弄清楚为什么“删除小时数”按钮在我的表单中不起作用。我有一个带有“添加小时数”按钮的选择菜单。当按下“添加小时数”按钮时，它会创建带有几个s的几个，其中之一是删除。具有删除功能的跨度不起作用。我在该函数中设置了一个警报，该警报未执行。 jQuery文件/ cdn已正确链接，其他按钮（添加时间）正常工作。

HTML

<% layout('layouts/boilerplate') -%>
<div class="container-fluid">
    <div class="row">
        <div class="col-6 form-group">
            <h1>New Post</h1>
            <form action="/posts" method="POST" enctype="multipart/form-data">

            <div class="form-group"><textarea name="post[description]" placeholder="Description"></textarea></div>
                <div class="form-group"><input class="form-control" type="text" name="post[location]" placeholder="Location"></div>
                <div id="output"></div>
                <div class="row">
                    <div class="col-12">
                        <select id='day' >
                            <option value="Mon">Mon</option>
                            <option value="Tue">Tue</option>
                            <option value="Wed">Wed</option>
                            <option value="Thu">Thu</option>
                            <option value="Fri">Fri</option>
                            <option value="Sat">Sat</option>
                            <option value="Sun">Sun</option>
                        </select>

                        <select id='hourStart'>
                        <option value="0 0.0">12:00 am (midnight)</option>
                            <option value="0 0.5">12:30 am</option>
                            <option value="0 1.0">1:00 am</option>
                            <option value="0 1.5">1:30 am</option>
                            <option value="0 2.0">2:00 am</option>
                            <option value="0 2.5">2:30 am</option>
                            <option value="0 3.0">3:00 am</option>
                            <option value="0 3.5">3:30 am</option>
                            <option value="0 4.0">4:00 am</option>
                            <option value="0 4.5">4:30 am</option>
                            <option value="0 5.0">5:00 am</option>
                            <option value="0 5.5">5:30 am</option>
                            <option value="0 6.0">6:00 am</option>
                            <option value="0 6.5">6:30 am</option>
                            <option value="0 7.0">7:00 am</option>
                            <option value="0 7.5">7:30 am</option>
                            <option value="0 8.0">8:00 am</option>
                            <option value="0 8.5">8:30 am</option>
                            <option value="0 9.0">9:00 am</option>
                            <option value="0 9.5">9:30 am</option>
                            <option value="0 10.0">10:00 am</option>
                            <option value="0 10.5">10:30 am</option>
                            <option value="0 11.0">11:00 am</option>
                            <option value="0 11.5">11:30 am</option>
                            <option value="0 12.0">12:00 pm(noon)</option>
                        </select>

                        <select  id='hourEnd' >
                        <option value="0 0.0">12:00 pm (noon)</option>
                        <option value="0 0.5">12:30 pm</option>
                            <option value="0 13.0">1:00 pm</option>
                            <option value="0 13.5">1:30 pm</option>
                            <option value="0 14.0">2:00 pm</option>
                            <option value="0 14.5">2:30 pm</option>
                            <option value="0 15.0">3:00 pm</option>
                            <option value="0 15.5">3:30 pm</option>
                            <option value="0 16.0">4:00 pm</option>
                            <option value="0 16.5">4:30 pm</option>
                            <option value="0 17.0">5:00 pm</option>
                            <option value="0 17.5">5:30 pm</option>
                            <option value="0 18.0">6:00 pm</option>
                            <option value="0 18.5">6:30 pm</option>
                            <option value="0 19.0">7:00 pm</option>
                            <option value="0 19.5">7:30 pm</option>
                            <option value="0 20.0">8:00 pm</option>
                            <option value="0 20.5">8:30 pm</option>
                            <option value="0 21.0">9:00 pm</option>
                            <option value="0 21.5">9:30 pm</option>
                            <option value="0 22.0">10:00 pm</option>
                            <option value="0 22.5">10:30 pm</option>
                            <option value="0 23.0">11:00 pm</option>
                            <option value="0 23.5">11:30 pm</option>
                            <option value="1 0.0">12:00 am (midnight next day)</option>
                            <option value="1 0.5">12:30 am (next day)</option>
                            <option value="1 1.0">1:00 am (next day)</option>
                            <option value="1 1.5">1:30 am (next day)</option>
                            <option value="1 2.0">2:00 am (next day)</option>
                            <option value="1 2.5">2:30 am (next day)</option>
                            <option value="1 3.0">3:00 am (next day)</option>
                            <option value="1 3.5">3:30 am (next day)</option>
                            <option value="1 4.0">4:00 am (next day)</option>
                            <option value="1 4.5">4:30 am (next day)</option>
                            <option value="1 5.0">5:00 am (next day)</option>
                            <option value="1 5.5">5:30 am (next day)</option>
                            <option value="1 6.0">6:00 am (next day)</option>
                        </select>

                        <button id="addHours" type="button" value="submit" >Add Hours</button>
                    </div>
                    </div>
                <input class="btn btn-primary mb-2" type="submit">
            </form>
        </div>
    </div>
</div>

JQUERY

$('#addHours').on('click', function(){
    const day = $('#day option:selected').text();
    const hourStart = $('#hourStart option:selected').text();
    const hourEnd = $('#hourEnd option:selected').text();

    //creates a div and assigns it to a variable
    var div = $('<div/>').attr("class", "display-hours");

    //create spans and assign it to a variable
    var spanDay = $("<span> </span>").text(day);
    var spanHourStart = $("<span> </span>").text(hourStart);
    var spanDash = $("<span> </span>").text("-");
    var spanHourEnd = $("<span> </span>").text(hourEnd);
    var remove = $('<span></span>').attr('class', 'remove-hours').text('REMOVE')
    var input = $('<input>').attr({
        type: 'hidden', 
        value: [day, hourStart, hourEnd],
        name: 'post[{day:day, hourStart:hourStart, hourEnd:hourEnd}]'
    });
    //adds div w hours to output
    $('#output').append(div);
    $(div).append(spanDay, spanHourStart, spanDash, spanHourEnd, remove, input)
}); 

//removes the div for hours
$('.remove-hours').click(function(){
    $(this).alert('working')
    $(this).parent().remove();

})