js添加删除父节点

沧半闲 2012-04-18 02:11:04

现在有一个:



   <select id="s1" size="4" >

      <option value="key0" >text0</option>

      <option value="key1" >text1</option>

      <option value="key2" >text2</option>

      <option value="key3" >text3</option>

      <option value="key4" >text4</option>

      <option value="key5" >text5</option>

   </select>

我想在 <option>节点外添加一个 <span style='display:none'></span> 来控制其隐藏
并且还有可能再将这个<span style='display:none'></span> 去掉
那Js该如何使用DOM实现？
现提供隐藏和现实的optin序号为2 即key2这行option
document.getElementById("s1").options[2]
如何隐藏并重新显示

...全文

672 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

沧半闲 2012-04-19

打赏
举报

IE和FF下正常 chrome这句报错
sel.insertBefore(span.getElementsByTagName("option")[0], sel.options[n]);
我换成
sel.insertBefore(span.getElementsByTagName("option")[0], span);
就OK了不过若是多次点击隐藏chrome还是会报错
看来chrome对于options的识别很独特啊看来为了统一只能用nextSibling去一个一个判断了

我昨晚最终想的是用 cloneNode和replaceChild 不过条条大路通罗马

非常感谢

囧 2012-04-18

打赏
举报



<!doctype html >

<html>

<head>

	<title> new document </title>

	<script type="text/javascript">

		function hide(n){

			var sel = document.getElementById("s1");

			var span = document.createElement("span");

			span.style.display = "none";

			span.id = "span" + n;

			sel.insertBefore(span, sel.options[n]);

			span.appendChild(sel.options[n]);

		};

		function show(n){

			var sel = document.getElementById("s1");

			span = document.getElementById("span"+n);

			if(span){

				sel.insertBefore(span.getElementsByTagName("option")[0], sel.options[n]);

				sel.removeChild(span);

			}

		};

	</script>

</head>

<body>

	<select id="s1" size="4" >

      <option value="key0" >text0</option>

      <option value="key1" >text1</option>

      <option value="key2" >text2</option>

      <option value="key3" >text3</option>

      <option value="key4" >text4</option>

      <option value="key5" >text5</option>

   </select>

	<input type="button" value="隐藏" onclick='hide(2)' />

	<input type="button" value="显示" onclick='show(2)' />

</body>

</html>