I am trying to select certain objects by the Strings contained in them.
For example, if i defined an array of words, say like this:
var searchTerms = ["apple", "banana"];
How can i select among a series of identical objects those that contain one of those terms and remove the containing object from the DOM? As an example:
<section class="node_category">
<h3>orange</h3>
</section>
<section class="node_category">
<h3>apple</h3>
</section>
Thanks for your help!
*edited for clarity
use contains
For example
if ( $(".node_category h3:contains('orange')").size() > 0 )
{
//if there is any node_category which has h3 that contains orange
}
DEMO
var searchTerms = ["apple", "banana"];
searchTerms.forEach( function(value){
$(".node_category h3:contains('" + value + "')").remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="node_category">
<h3>orange</h3>
</section>
<section class="node_category">
<h3>apple</h3>
</section>If you want parent element (section class="node_category">) to be removed for matching h3, then try
var searchTerms = ["apple", "banana"];
searchTerms.forEach( function(value){
$(".node_category h3:contains('" + value + "')").parent().remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="node_category">
<h3>orange</h3>
</section>
<section class="node_category">
<h3>apple</h3>
</section>If you want a flexible solution you can use quicksearch too: https://github.com/riklomas/quicksearch
A little exemple :
var qs=$('input#search').quicksearch('table tbody td');
$("#append").on("click", function(e) {
$("tr").append('<td>'+$("#search").val()+'</td>');
qs.cache();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.2.0/jquery.quicksearch.min.js"></script>
/* Example form */
<form>
<input type="text" id="search">
<input type="button" id="append" value="ajax">
</form>
/* Example table */
<table>
<tbody>
<tr>
<td>Test cell</td>
<td>Another test cell</td>
</tr>
</tbody>
</table>Without jQuery
var searchTerms = ["apple", "banana"],
nodes = [].slice.call(document.querySelectorAll('h3')); // get all h3's and convert from nodelist to array
// loop through h3's
nodes.forEach(function(node) {
if (searchTerms.indexOf(node.textContent) !== -1) {
//only remove h3
node.parentNode.removeChild(node);
// remove section as well
// node.parentNode.parentNode.removeChild(node.parentNode);
}
});
h3removed, or its container too?