Jquery Remove Label Text

I'm trying to remove the Search text from this html input element. I recognize the element is inside the label thats how it was built. Is there any way to remove the Search text bu

Solution 1:

In your javascript, you can set a variable equal to the input, clear the contents of the label, and then append the input to the now-empty label.

var input = $('#datatable_users_filter label input');
$("#datatable_users_filter label").html('');
$("#datatable_users_filter label").append(input);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
   <label>Search <input type="search"/></label>
</div>

This is just one solution and may or may not work for your use case. Another option could be doing a string replace on the innerHTML of the label.

$("#datatable_users_filter label").html($("#datatable_users_filter label").html().replace('Search ', ''));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
   <label>Search <input type="search"/></label>
</div>

Solution 2:

sapmle for remove label text

$("#datatable_users_filter label").html($("#datatable_users_filter input"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
   <label>Search <input type="search"/></label>
</div>

sapmle for remove label element

var elem=$("#datatable_users_filter input");
$("#datatable_users_filter").empty().html(elem);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
   <label>Search <input type="search"/></label>
</div>

Solution 3:

Keep Label and Input like this..

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

Then hide it by jquery

    $('label').hide();