js添加删除父节点,该如何处理-JavaSript-爱易网页

js添加删除父节点,该如何处理

日期：2014-05-16　浏览次数：20426 次

js添加删除父节点
现在有一个:

HTML code


   <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]
如何隐藏并重新显示

------解决方案--------------------

HTML code


<!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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js添加删除父节点,该如何处理

相关资料更多>

推荐阅读更多>