Jquery doesn't hide an element from the first click
<p>I have a strange problem, I have an event listener </p>

<pre><code>$(document).on('click', '.suggested-location-item', function(event) {
    event.preventDefault();
    $('#IDsuggestedLocationsList').html('');
    $('#IDlocationSuggestBox').hide();


});
</code></pre>

<p>so when the .suggested-location-item is clicked once (1 time), the element does not disappears it just blinks very fast, it disappears only on second click however if I do <code>$('#IDlocationSuggestBox').remove();</code>instead of hide() it removes the element on the first click with no problems. Here I'll post my entire code because maybe some other code causes the problem:</p>

<p>this code generates the element: </p>

<pre><code>$(document).on('propertychange change click keyup input paste', '#IDLocationSearchInput', function(event) {
    event.preventDefault();
    var searchTerm = $('#IDLocationSearchInput').val();
    $.ajax({
        url: IDurlToGetLocation,
        type: 'GET',
        data: {'location':searchTerm},
    })
    .done(function(data) {
        if (data.success == 0) {
            $('#IDlocationSuggestBox').hide();
            $('#IDsuggestedLocationsList').html('');
            if (data.message) {
                $('#IDlocationSuggestBox').show();
                $('#IDsuggestedLocationsList').html("&lt;div class='list-group-item'&gt;"+data.message+"&lt;/div&gt;");
            }
        }else{
            $('#IDlocationSuggestBox').show();
            $('#IDsuggestedLocationsList').html('');

            $.each(data, function(index, val) {

                $('#IDsuggestedLocationsList').html($('#IDsuggestedLocationsList').html()+"&lt;a href='' type='"+val.table_name+"' id='"+val.id+"' class='list-group-item suggested-location-item'&gt;"+val.city_name+"&lt;/a&gt;");
            });
        }


    });

});
</code></pre>

<p>And this code is suppose to remove the element :</p>

<pre><code>$(document).on('click', '.suggested-location-item', function(event) {
  event.preventDefault();
  $('#IDsuggestedLocationsList').html('');
  $('#IDlocationSuggestBox').hide();


});
</code></pre>

<p>please help, that's a strange issue /?</p>

<p>Thank You.</p>