JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="pres-list-ul">
<li data-id="5756" data-category="" data-group="" data-created="" data-author="">5756</li>
<li data-id="5757" data-category="" data-group="" data-created="" data-author="">5757</li>
<li data-id="5758" data-category="" data-group="" data-created="" data-author="">5758</li>
<li data-id="5759" data-category="" data-group="" data-created="" data-author="">5759</li>
<li data-id="5760" data-category="" data-group="" data-created="" data-author="">5760</li>
</ul>
<button class="filter">filter</button>
JavaScript
var remote_data = {
5756: {
id: 5756,
title: '',
description: '',
},
5757: {
id: 5757,
title: '',
description: '',
},
5758: {
id: 5758,
title: '',
description: '',
},
}
$(document).on('click', '.filter', filter_local)
function filter_local () {
var local_ids = $('#pres-list-ul li').toArray().map(function (element) { return $(element).data('id') })
var remote_ids = []
for (remote_index in remote_data) {
remote_ids.push(remote_data[remote_index].id)
}
console.log(local_ids, remote_ids)
for (local_id in local_ids) {
if (remote_ids.indexOf(local_ids[local_id]) == -1) {
$('#pres-list-ul li[data-id="' + local_ids[local_id] + '"]').hide()
}
}
}