2012-03-25 42 views
0

在我的應用程序中,我檢查用戶的瀏覽器是否爲HTML5-capable,並且能夠在輸入字段(使用Modernizr)中顯示placeholders。如果是這樣,我想以自動化的方式從HTML文檔中刪除所有labels,但我真的不知道如何。刪除JavaScript中的所有標籤元素

在通俗地說,如果用戶的瀏覽器支持佔位符,我希望把這個:

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

進入這個-in每次事發後:

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

我所擁有的是:

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

到目前爲止,我已將id s分配給標籤,並將它們逐個刪除,但我會就像一個更有效的方法來做到這一點。

+10

不要這樣做!從規範*「placeholder屬性不應該用作標籤的替代品」。*刪除標籤意味着人們無法檢查他們是否在正確的字段中輸入正確的值(尤其是如果它是由自動放置的 - 完全),並且使任何使用屏幕閱讀器的人都很難或不可能知道他們應該進入該領域的內容。 (你的例子的一個好佔位符是「[email protected]」而不是「你的電子郵件」。) – Quentin 2012-03-25 20:57:50

+0

@Quentin。這應該是一個答案。我會upvote這個答案 – Ben 2012-03-25 21:06:24

+1

@本 - 雖然我認爲這是一個很好的建議,但它不回答這個問題。 – Quentin 2012-03-25 21:07:45

回答

2

如果你是使用jQuery OK,這是一個班輪:

$('label').remove(); 

例在這裏 - 取消註釋在JavaScript部分的一條線,看看效果:

+0

謝謝,它工作完美!非jQuery的答案也可以工作,雖然 – federicot 2012-03-25 21:12:48

+0

太麻煩了,非常樂意幫忙! – 2012-03-25 21:15:04

+1

非jQuery的一個只顯得更加混亂,因爲你看不到由jQuery庫提供的32KB的縮小和壓縮的JavaScript;) – Quentin 2012-03-25 21:15:28

4

首先,建立現有標籤的表格,如下所示:

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

接下來,找到具有佔位符的輸入元素。對於那些有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中做東西......)

+0

不能得到這個工作 - 感激,如果你可以澄清:http: //jsfiddle.net/geotheory/mst9bjwu/ – geotheory 2014-10-08 11:18:20

+0

@geotheory這段代碼是去除標籤。不是列表。您不能隨意複製遠程處於「移除事物」相同類別的代碼並假定其可行。 – 2014-10-08 11:54:25

+0

然後你的解決方案不能反映這個問題的標題,並且會浪費人們的時間 – geotheory 2014-10-08 12:17:36