Question

在我的应用程序中，我检查用户的浏览器是否为HTML5-capable，并且能够在输入字段中显示placeholders（使用Modernizr）。如果是这样，我想以自动化的方式从HTML文档中删除所有labels，但我真的不知道如何。

通俗地说，如果用户的浏览器支持占位符，我想转此：

<label for="email">
  Email:
</label>
<input type="email" id="email" placeholder="Your email">

每次出现时都会---

<input type="email" id="email" placeholder="Your email">

我只有：

if (Modernizr.input.placeholder) {
  // Remove all labels from the HTML document
}

到目前为止，我已将id分配给标签并逐个删除，但我希望这是一种更有效的方法。

Answer 1

首先，构建一个现有标签的表格，如下所示：

var labels = {}, tags = document.getElementsByTagName('label'), l = tags.length, i;
for( i=0; i<l; i++) labels[tags[i].getAttribute("for")] = tags[i];

接下来，查找具有占位符的输入元素。对于那些有ID并且有ID的人，请查找并删除相关标签。

tags = document.getElementsByTagName('input');
l = tags.length;
var lb;
for( i=0; i<l; i++) {
    if( !tags[i].getAttribute("placeholder")) continue;
    if( lb = labels[tags[i].id]) lb.parentNode.removeChild(lb);
}

完成！ 不需要jQuery !! （因为它实际上可以在原始JS中执行...）

Answer 2

如果你对使用jQuery没问题，这是一个单行：

$('label').remove();

此处的示例 - 取消注释JavaScript部分中的一行以查看效果：

http://jsfiddle.net/t42qs/

删除JavaScript中的所有标签元素

2 个答案: