I'm working on my companies legacy project. It uses jQuery. I have to add a feature to it. The feature is that, on clicking a checkbox, a span with the checked value (let's call it "filtered value") will be displayed with a "remove" icon in it. On clicking the remove icon of the "filtered value", filtered value should be removed and corresponding checkbox should be unchecked.
I got the first half working. But REMOVE functionality isn't working. I get an error "ReferenceError, removeFilter is not defined." Here is the Codesandbox.
var filtersApplied = [];
$('.ps-sidebar').on('change', 'input[type=checkbox]', function () {
var me = $(this);
console.log('me', me);
if (me.prop('checked') === true) {
filtersApplied.push(me.attr('data-filter-label'));
} else {
filtersApplied = filtersApplied.filter(function (filter) {
return filter !== me.attr('data-filter-label');
});
}
function removeFilter(el, filter) {
console.log('im clicked', el);
// el.remove();
}
if (filtersApplied.length === 0) {
$('.ps-plans__filters').hide();
$('.ps-plans__filters-applied').html('');
} else {
$('.ps-plans__filters').show();
var filtersAppliedHtml = '';
filtersApplied.forEach(function (filter) {
filtersAppliedHtml +=
'<span class="ps-plans__filter" id="' +
filter +
'">' +
filter +
'<span class="remove" onclick="removeFilter(this, filter)">x</span></span>';
});
console.log('filtersAppliedHtml', filtersAppliedHtml);
$('.ps-plans__filters-applied').html(filtersAppliedHtml);
}
});