jquery删除标签文本

Question

我试图从这个html输入元素中删除搜索文本。我认识到元素在标签内，这就是它是如何构建的。除了Search keep the input element**.**，还有什么方法可以删除文本吗？

这是我的HTML代码

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

这是我的JavaScript代码：

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

它移除整个元素，而不仅仅是搜索标签。

Answer 1

在javascript中，您可以设置一个等于输入的变量，清除标签的内容，然后将输入追加到现在为空的标签中。

​

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>

​

这只是一个解决方案，可能对用例有效，也可能不起作用。另一个选项可能是在标签的innerHTML上执行字符串替换。

​

$("#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>

​

Answer 2

移除标签文本的边框

​

$("#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>

​

移除标签元素的边框

​

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>

​

Answer 3

保持这样的标签和输入。

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

然后用jquery隐藏它。

    $('label').hide();