Remove html element javascript by their parent or class, with div,ul li,img, input and innerHTML

In the web front-end design process, using javascript to delete html element objects is often used. For example, a page displays a news when loading is complete. This news is displayed only once and only for a short period of time. After it is displayed, it needs to be deleted or hidden.

You remove an html element with the removeChild() method in javascript. An element cannot remove itself, so it can only be removed by its parent, so the method of removing a child is used. Whether you delete page-level elements div, or list-level elements ulli, ulol, and delete image elements img and text box elements input, you can use the removeChild() method in javascript.

1. Javascript remove div and its innerHTML

If there is a div as follows:

<div><div id="div_id"><h3>Remove html element javascript</h3><p>This is paragraph content</p></div></div>

Javascript code:

var obj = document.getElementById("div_id");
      obj.innerHTML = "";// Remove innerHTML of div

// delete div
      var parentObj = obj.parentNode; // Get the parent object of the div
      parentObj.removeChild (obj); // Remove it through the parent object of the div

2. Delete li from ul javascript

If there is ulli as follows:

<div><ul id="ul_id"><li>Remove html element javascript 2: Delete li from ul javascript.</li><li>olli is deleted in the same.</li></ul></div>

Javascript code:

var obj = document.getElementById("ul_id");
      obj.innerHTML = "";// delete all innerHTML of ul(Delete all li)

// delete all innerHTML of li
      var obj = document.getElementById("ul_id");
      var li_obj = obj.childNodes;// All li are children of ul, so get them through childNodes
      for (var i = 0; i < li_obj.length; i++) {
            li_obj[i].innerHTML = "";// Remove all innerHTML of li
      }

// delete ul
      var parentObj = obj.parentNode; // Get the parent object of ul
      parentObj.removeChild (obj); // Remove it through the parent object of ul

3. How to remove img tag in javascript

The img as follows:

<div><img id="img_id" src="/images/delete.jpg" alt="Remove html element javascript 3: How to remove img tag in javascript" /></div>

Javascript code:

var obj = document.getElementById("img_id");
      var img_parent = obj.parentNode; // Get the parent object of img
      img_parent.removeChild (obj); // Remove it through its parent object

4. Remove input with javascript

(1) Remove input with javascript

If any input is as follows:

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

Javascript code:

var obj = document.getElementById("input_id");
      var inputParent = obj.parentNode; // Get the parent object of the input
      inpuParent.removeChild(obj); // Remove it through its parent object

(2) Javascript remove input in batches

Html code:

<ul id="parent">
        <li><input type="text" id="input_1" name="input_text" /></li>
        <li><input type="text" id="input_2" name="input_text" /></li>
        <li><input type="text" id="input_3" name="input_text" /></li>
    </ul>

Javascript code:

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

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

                // When the input is removed, the elements of array will decrease. At this time, the input needs to be got again. This can be achieved by recursive calls.
                if (input_arr[i] == undefined && i < arrLen) {
                    removeInputElements();
                }
            }
        }
        removeInputElements();
    </script>

Javascript code description:

1. To get input elements, you can also use document.getElementsByTagName("input"), which is to get all input elements from the entire web page, and the efficiency is not as high as that from the specified range in the instance. In addition, you can also use document.getElementsByName("input_text"), but you must provide that the input elements have the same name, such as name="input_text" in the example.

2. When input elements are deleted in batches, the elements of array will change, resulting in the inability to delete all input elements. For example: There are 3 input elements in the instance. After deleting the two input elements, use input_arr[3] to get the third input, which will return undefined; at this time, you need to get the input again.

5. Javascript remove html element by class

Html code:

<div>
            <div class="div_item">Javascript remove html element by class</div>
            <div class="div_item">Remove div javascript by class</div>
            <div class="div_item">Delete div by class in javascript</div>
    </div>

New browser Javascript code:

<script type="text/javascript" language="javascript">
      function removeElementsByClassName(class_name) {
          var elements = document.getElementsByclass_name(class_name);

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

        // When the html elements are removed, the elements in array will decrease. At this time, they need to be got again. This can be achieved by recursive calls.
              if (elements[i] == undefined && i < arrLen) {
                  removeElementsByClassName(class_name);
              }
          }
      }
      removeElementsByClassName("div_item");// Remove div by class
    </script>

Old browser Javascript code:

    <script type="text/javascript" language="javascript">
        function removeElementsByClassNameForOldBrowser(class_name) {
            var elements = document.all;
            var arrLen = elements.length;

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

              // When the html elements are removed, the elements in array are reduced. At this time, they need to be got again. This can be achieved by recursive calls.
                    removeElementsByClassNameForOldBrowser(class_name);
                }
            }
        }
        removeElementsByClassNameForOldBrowser("div_item");// Remove div by class
    </script>