onRemove event not firing

Question

I have a some bootstrap-tagsinput code:

<div x-show.transition.in="step === 1">
<div class="row mb-3">
    <div class="col-md-12">
        <strong>Job Area:</strong>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <!-- <input name="job_area" placeholder="Select a job area or type to insert another." class="form-control" \> -->
        <select multiple data-role="tagsinput" name="job_area" id="job_area" placeholder="Select a job area or type to insert another."></select>
        <div class="row mt-2">
            <div class="col-md-12">
                <button class="btn btn-sm btn-primary m-2" type="button" onclick="$('#job_area').tagsinput('add', 'Leadership'); $(this).hide();">Leadership</button>
                <button class="btn btn-sm btn-primary m-2">Governance, Risk Management and  Compliance</button>
                <button class="btn btn-sm btn-primary m-2">Offensive</button>
                <button class="btn btn-sm btn-primary m-2">Defensive</button>
                <button class="btn btn-sm btn-primary m-2">Security Engineering</button>
                <button class="btn btn-sm btn-primary m-2">Architecture</button>
            </div>
        </div>
    </div>
</div>
<script>
        $("input[name='job_area']").on('itemRemoved', function(event) {
        console.log('item added : '+event.item);
    });
</script>

I am trying to console log the item when a tag is removed however it is not firing. Have also tried different selectors to get the correct input. Nothing fires.

Any help is appreciated.

Answer 1

There were 2 issues I was having. First, I wasn't using the right selector. I needed to use select[name='job_area'] instead of input/

Secondly, my event listener was not in a document.ready call back. Fixed it by wrapping docready:

$(document).ready(function() {
    $("select[name='job_area']").on('itemRemoved', function(event) {
        console.log('item removed : '+event.item);
    });
});