How can I replace text within a label with javascript that has no name or id?

Question

I'm using datatables jquery plugin for beautifying my tables. I'm trying to stylize the search box to look more like this

However the javascript generated code for the current search box in datatables looks something like this

<div class="dataTables_filter" id="countstable_filter">
    <label>Search: 
          <input type="text" aria-controls="countstable" placeholder="Search">
    </label>
 </div>

I was able to get javascript to add a placeholder attribute to the search box. But I can't figure out how to remove the Search: text. I have seen a few solutions on google, but they required the label to have an id which I don't have here.

Answer 1

Since you're using DataTables you could also turn off the Search: string by changing the language variable sSearch see more documentation on oLanguage.sSearch and jsBin.

$("#someTable").dataTable({
  oLanguage: {
    sSearch: ""
  }
});

Answer 2

You can remove the text node containing Search: using:

$("#countstable_filter label").contents().first().remove();

.first() is because it is the first node (a text node) of the label. Functions such as .contents() and .first() enable you to find nodes (traverse the DOM) without needing an ID. Essentially, you start with an element and walk your way through the DOM with specific functions until you've reached the element wanted.