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

CSS3 search box

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.

Bobby · Accepted Answer · 2012-12-12 22:54:03Z

6

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: ""
  }
});

answered Dec 12, 2012 at 22:54

Bobby

18.3k15 gold badges77 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pimvdb · Accepted Answer · 2012-07-20 22:33:25Z

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.

edited Jul 20, 2012 at 22:33

answered Jul 20, 2012 at 22:27

pimvdb

155k80 gold badges313 silver badges358 bronze badges

1 Comment

David Thomas Over a year ago

Deleted my incomplete answer because to complete it would, essentially, duplicate your own. +1!

Sid · Accepted Answer · 2012-07-20 22:30:55Z

1

var x=document.getElementsByTagName("input");
for(var i=0;i<x.length;i++){
    var obj = x[i];
    if(obj.getAttribute("type")=='text' && obj.getAttribute("aria-controls")=='countstable' && obj.getAttribute("placeholder")=='Search'){
    // do stuff with the object
}
}

answered Jul 20, 2012 at 22:30

Sid

5,00314 gold badges62 silver badges116 bronze badges

Comments

adeneo · Accepted Answer · 2012-07-20 22:33:31Z

1

var label = $('label', '.dataTables_filter');
    label.html(label.children());

FIDDLE

children() will not include the text node, so just rewrite the content with the elements only, and get rid of the text node.

answered Jul 20, 2012 at 22:33

adeneo

319k29 gold badges410 silver badges392 bronze badges

4 Comments

devcoder Over a year ago

I am still learning javascript. How does $('label', '.dataTables_filter'); work ?

adeneo Over a year ago

It uses context, basically it's just a shortcut for $( '.dataTables_filter').find('label'), which finds any label element withing the element with class dataTables_filter. You can use any selector you like, and $('#countstable_filter label') is simpler and better IMO, I just did'nt want to copy code, so came up with something else. The selector is'nt really the answer, the method is, and I my opinion this was simpler than contents().first() ??

devcoder Over a year ago

I can't really say if it's simpler. I'm new to JS and the other way seems a bit simpler on looking, maybe because I'm used to scraping DOM with Nokogiri and normally work with that methodflow.

adeneo Over a year ago

@devcoder - Thats completely up 2 u, both ways should work, and pimvdb's way is a good way of doing it, and probably more the way it was meant to be done.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related