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 but keep the input element.

Here is my HTML Code

<div id="datatable_users_filter">
   <label>Search <input type="search"/></label>
</div>

Here is my JavaScript Code:

 $("#datatable_users_filter label").css("display","none");

It removes the entire element not just the Search label.

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 but keep the input element.

Here is my HTML Code

<div id="datatable_users_filter">
   <label>Search <input type="search"/></label>
</div>

Here is my JavaScript Code:

 $("#datatable_users_filter label").css("display","none");

It removes the entire element not just the Search label.

• javascript
• jquery

• I'm not sure to undestand. The wanted effect is remove the label tag with his content but saving the input tag, or remove the text inserted by the user in the input tag? – Jul10 Commented Oct 22, 2017 at 20:35

3 Answers 3

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./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./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 text

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

<script src="https://ajax.googleapis./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
   <label>Search <input type="search"/></label>
</div>

Keep Label and Input like this..

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

Then hide it by jquery

    $('label').hide();