How to remove Search label around Search Input.

How to remove Search label around Search Input.

trevoctrevoc Posts: 14Questions: 3Answers: 1

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?

This question has an accepted answers - jump to answer

Answers

  • trevoctrevoc Posts: 14Questions: 3Answers: 1
    edited October 2016 Answer ✓

    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.

  • allanallan Posts: 61,322Questions: 1Answers: 10,023 Site admin

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

    Allan

  • Jcc.SanabriaJcc.Sanabria Posts: 1Questions: 0Answers: 0

    Thanks!! :smile:

  • mwregmwreg Posts: 2Questions: 1Answers: 0
    edited 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');

  • Rmy5Rmy5 Posts: 1Questions: 0Answers: 0
    edited November 2018

    Remove the label and add a placeholder:

       '$('#stats-table').DataTable({
            language: { search: '', searchPlaceholder: "Search..." },
        });'
    
  • waleedelgalilwaleedelgalil Posts: 1Questions: 0Answers: 0

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

This discussion has been closed.