如何使用 JqLite 或 javascript 删除 HTML 元素答案

【问题标题】：How can I remove HTML elements with JqLite or javascript如何使用 JqLite 或 javascript 删除 HTML 元素
【发布时间】：2016-05-17 15:56:38
【问题描述】：

如何使用 JqLite 或原始 javascript 删除以下文本“搜索：”？

<label>
search:<input type="text">
<label>

更新

我没有很清楚地解释这个问题。所有的 HTML 元素都是由 angular 指令创建的，我可能只能用 JQLITE 或 JS 操作 DOM。而且输入的属性可能会改变，所以我不能用新的输入替换标签的所有子节点

【问题讨论】：

获取对 label 元素的引用。删除其所有子文本节点。你试过什么？这不是一个代码编写服务：你尝试一些事情，如果你有问题，询问他们并且答案可能即将到来。
@SatejS——也许，但也是these 的大部分。也许OP想要jqlite（因此标签）。
@SatejS 这里似乎没有区别，html() 和 text()。但想不出只删除文本节点的方法

标签： javascript jqlite

【解决方案1】：

请试试这个

<html>

<body onload="remove()">
    <label>
        search:
        <input type="text" id="search">
    </label>
</body>
<script type="text/javascript">
function remove() {
    document.getElementById('search').remove();
}
</script>

</html>

【讨论】：

【解决方案2】：

这是你需要做的。鉴于你的 HTML 是这样的：

<label>
search:<input type="text">
<label>

你需要先拿到标签。你这样做

$("label")

考虑到你想操作里面的文本，你会得到 $("label").innerHTML。让我们把它放在一个变量中。

x=$("label").innerHTML;

然后，我们使用替换字符串函数将“search:”的值替换为一个空格。

y=x.replace("search:","");

我们最终将这个 y 的值推回 HTML 内部

$("label").innerHTML=y

您可以将其缩短为更少的步骤，但为了便于理解，我将它们分开。

【讨论】：

如何选择文本节点？喜欢$(lable).content().filter() ?
@VincentFu，您可以选择跨度并执行str.parentElement。这是标签节点。对于输入元素，str.nextElementSibling
抱歉有点糊涂了...开头没有span，这种情况我们需要先选择文本节点“search”，然后使用wrap()创建span？跨度>
@VincentFu，请检查答案。
感谢@SatejS，这将选择并替换标签的所有子节点，包括文本节点和输入

【解决方案3】：

label.innerHtml='<input type="text">'

其中 label 是该标签标记周围的查询包装器

【讨论】：

但这涉及破坏原始输入并对其替换进行硬编码。如果输入已经有一个值或事件处理程序怎么办？
感谢您的回答！但是输入元素的属性是动态的，有没有其他的方法呢？