js删除元素对象或其内容（div、ulli、img、input等）

在Web前端设计过程中，用js删除元素对象经常会用到。例如某一个页面在加载完成时显示一条新闻，这条新闻只显示一次且仅显示一小段时间，则显示完后就需要把它删除或隐藏。

在 javascript 中，删除元素其实是移除元素，用 removeChild() 方法，元素不能自己删除自己，所以只能用其父元素将其删除，所以用移除孩子的方法。无论用js删除页面级元素div，还是删除列表级元素 ulli、ulol，以及删除图片元素img、文本框元素input，都用 removeChild() 方法。

一、js删除div及其内容

假如有 div 如下：

<div><div id="delId"><h3>js删除元素之div及其内容</h3><p>这是段落内容</p></div></div>

Javascript 代码如下：

var obj = document.getElementById("delId");
   obj.innerHTML = "";//删除div内容

//删除div
   var parentObj = obj.parentNode;//获取div的父对象
   parentObj.removeChild(obj);//通过div的父对象把它删除

二、js删除ulli及其内容

假如有 ulli 如下：

<div><ul id="ulId"><li>js删除元素之ulli及其内容</li><li>olli也是一样的删除方法</li><ul></div>

Javascript 代码如下：

var obj = document.getElementById("ulId");
   obj.innerHTML = "";//删除ul的内容（删除所有li）

//删除所有li的内容
   var obj = document.getElementById("ulId");
   var liObj = obj.childNodes;//li都是ul的孩子，所以通过 childNodes 获取所有li
   for (var i = 0; i < liObj.length; i++) {
      liObj[i].innerHTML = "";//循环删除所有li的内容
   }

//删除ul
   var parentObj = obj.parentNode;//获取ul的父对象
   parentObj.removeChild(obj);//通过ul的父对象把它删除

三、js删除img元素

假如有 img 如下：

<div><img id="imgId" src="/images/del.jpg" alt="js删除img元素" /></div>

Javascript 代码如下：

var obj = document.getElementById("imgId");
   var imgParent = obj.parentNode;//获取img的父对象
   imgParent.removeChild(obj);//通过img的父对象把它删除

四、js删除input元素

1、js 删除一个 input 元素

假如有 input 如下：

<span><input id="inputId" type="text" /></span>

Javascript 代码如下：

var obj = document.getElementById("inputId");
    var inputParent = obj.parentNode;//获取input的父对象
    inpuParent.removeChild(obj);//通过inpu的父对象把它删除

2、js 批量删除 input 元素

Html 元素如下：

<ul id="parent">
      <li><input id ="input-1" name ="input_text" type="text" /></li>
      <li><input id ="input-2" name="input_text" type="text" /></li>
      <li><input id ="input-3" name="input_text" type="text" /></li>
    </ul>

Javascript 代码如下：

<script type="text/javascript" language="javascript">
      function removeInputs() {
          var parent = document.getElementById("parent");
          var inputs = parent.getElementsByTagName("input");

          var arrLen = inputs.length;
            for (var i = 0; i < arrLen; i++) {
              if (inputs[i].getAttribute("type") == "text") {
                  inputs[i].parentNode.removeChild(inputs[i]);
              }

              //当删除 input 后，数组元素会减少，此时需要重新获取 input，可通过递归调用实现
              if (inputs[i] == undefined && i < arrLen) {
                 removeInputs();
              }
          }
      }
      removeInputs();
    </script>

Javascript 代码说明：

1、获取 input 元素也可以用 document.getElementsByTagName("input")，它是从整个网页中获取所有 input 元素，效率没有实例中从指定范围获取高。另外，还可以用 document.getElementsByName("input_text")，前提是 input 元素要设置相同的名称，如例中的 name="input_text"。

2、批量删除 input 元素时，数组元素会发生变化，导致无法删除所有 input 元素。例如：实例中共有 3 个 input 元素，当删除两个  input 元素后，再用 inputs[3] 获取第 3 个 input，将返回 undefined；此时需要重新获取 input。

五、js 用 class 属性删除 html 元素

Html 元素如下：

<div>
      <div class="divItem">js 用 class 属性删除 html 元素</div>
      <div class="divItem">通过 class 属性删除 div</div>
      <div class="divItem">通过 class 属性移除 div</div>
    </div>

新浏览器 Javascript 代码：

<script type="text/javascript" language="javascript">
      function removeElementsByClass(className) {
          var tags = document.getElementsByClassName(className);

          var arrLen = tags.length;
          for (var i = 0; i < arrLen; i++) {
              tags[i].parentNode.removeChild(tags[i]);

            //当删除 html 元素后，数组元素会减少，此时需要重新获取它们，可通过递归调用实现
              if (tags[i] == undefined && i < arrLen) {
                  removeElementsByClass(className);
              }
          }
      }
      removeElementsByClass("divItem");
    </script>

旧浏览器 Javascript 代码：

    <script type="text/javascript" language="javascript">
        function removeElementsByClassForOldBrowser(className) {
            var tags = document.all;
            var arrLen = tags.length;

            for (var i = 0; i < arrLen; i++) {
                if (tags[i].className == className) {
                    tags[i].parentNode.removeChild(tags[i]);

                  //当删除 html 元素后，数组元素减少，此时需要重新获取它们，可用递归调用实现
                    removeElementsByClassForOldBrowser(className);
                }
            }
        }
        removeElementsByClassForOldBrowser("divItem");
    </script>