How to remove Search label around Search Input.

trevoc · October 2016

there are no id's in the labels that wrap the Search input box making them difficult to target and remove.

the specific html is as follows:

<label>Search:<input type="search" class="" placeholder="Search Valley Members..." aria-controls="VOTERdirectory"></label>

I want to remove the label tags or leave them but remove the word Search:

I've attempted to target these labels and remove them like so:

    var $label = document.getElementsByTagName("INPUT")[0].closest("label");
    $label.replaceWith(document.getElementsByTagName("INPUT")[0]);

Although this works, it doesn't work in all browsers.

I can't stand hacking core files as this makes maintenance difficult.

Any suggestions on how to remove this would be greatly appreciated.

If I might make a suggestion for future releases:

have unique id's for all elements, and don't wrap elements that don't need to be wrapped.

e.g. change:

<label>Search:<input type="search"></label>

to

<label id="label_001">Search:</label><input type="search">

so that once they are identified they can be targeted and removed without removing the inner elements.

maybe I'm missing the forest for the trees.

Any suggestions?

trevoc · October 2016

WOW, slap my forehead...

I was right, sometimes I can't see the forest for the trees.

Just hit me that such a well designed plugin would probably support localization.

YUP. hadn't got that far in the documentation yet.

really easy... <sigh>

for those that may end up here:

$('#example').DataTable( {
    language: { search: "" },
} );

If you had any idea the cokamainee things I did to remove that tonight.

sometimes you just need to walk away from it, or in my case... 10 minutes after making your frustrations publicy known (on the forums) it hits you.

allan · October 2016

Heh - good to hear you've got the solution. Thanks for posting back!

Allan

Jcc.Sanabria · May 2017

Thanks!!

mwreg · October 2017

Thanks!
And then we can add the "placeholder" attribute into the search input field.

$('#tablebalanceBTC_filter input[type="search"]').attr('placeholder', 'Table search');

Rmy5 · November 2018

Remove the label and add a placeholder:

   '$('#stats-table').DataTable({
        language: { search: '', searchPlaceholder: "Search..." },
    });'

waleedelgalil · January 2019

The below is the solution and worked with me
'$('#stats-table').DataTable({
'olanguage': { 'sSearch': '', 'sSearchPlaceholder': "Search..." },
});'

Answers