JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="clearChecked">Clear Checked Items</button>
<ul id="keyWords">
<li class="list-group-item" data-style="button">
<input id="link_0" class="check" name="check" type="checkbox">
<label for="link_0">I am a link</label>
</li>
<li class="list-group-item" data-style="button">
<input id="link_1" class="check" name="check" type="checkbox">
<label for="link_1">I am a link</label>
</li>
<li class="list-group-item" data-style="button">
<input id="link_2" class="check" name="check" type="checkbox">
<label for="link_2">I am a link</label>
</li>
</ul>
JavaScript
$('#clearChecked').click(function() {
currentArray = [];
$('.check').each(function() {
var $curr = $(this);
if (!$curr.is(':checked')) {
var value = $curr.parent().text();
currentArray.push(value);
localStorage.setItem('keyWords', JSON.stringify(currentArray));
loadKeyWords();
} else {
$curr.parent().remove();
}
});
});