Question

我正在使用动态复选框，我可以在其中添加和删除，例如用户。添加工作正常，但要删除所有子元素的麻烦。特别是我不知道如何删除。

        <style>
    .container { align:right; border:1px solid #000000; width:300px; height: 100px; overflow-y: scroll;}
    </style>
    <script type="text/javascript">
    var addTask = function () {

      var newCheckbox = document.createElement("input");
      newCheckbox.type = "checkbox";
      newCheckbox.value = document.getElementById("MailAddress").value;
    newCheckbox.id = "C11";
      document.getElementById("UserList").appendChild(newCheckbox);


      var label = document.createElement('label');
      label.htmlFor = document.getElementById("MailAddress").value;
    label.id = "L11";
      label.appendChild(document.createTextNode(document.getElementById("MailAddress").value));

      document.getElementById("UserList").appendChild(label);
      document.getElementById("L11").appendChild(document.createElement("br"));
  }

  function delTask() {

        var item = document.getElementById("C11");
        item.parentNode.removeChild(item);
        var item = document.getElementById("L11");
        item.parentNode.removeChild(item);
      // How can I remove die <br> too?
  }
  </script>
    </head>
    <body>


    <header>
        <p>Usergroup:</p>
    </header>
    <input type="text" id="MailAddress">
    <input type="submit" value="Add Mail Address" onClick="addTask()" id="AddUser">

    <div  class="container" id="UserList"></div>

    <input type="submit" value="Delete One Mail" onClick="delTask()" id="remove">

Answer 1

如果问题是移除<br>，请尝试此

var e = document.getElementsByTagName("p")[0];
 e.innerHTML = e.innerHTML.replace('<br>', '');

Answer 2

您可以使用document.getElementsByTagName('br')获取所有br tags的数组，然后删除要删除的br标记。这需要您事先知道文档中有多少br个标记，以便您删除具有正确索引的标记。

var x = document.getElementsByTagName("br");
x[1].parentNode.removeChild(x[1]);

假设您有两个br标记，

将删除文档中的第二个br标记。

Answer 3

这应该可以满足您的需求 - 它会查找带有ID的元素，然后将每个后续兄弟节点移除到元素（或标记），而不是注释，文本等。

  function delTask() {
        var el1 = document.getElementById("C11");
        var el2 = document.getElementById("L11");
        var next = el2.nextSibling;
        // create array to hold all the elements to be removed
        var items = [el1, el2, next];
        // iterate through siblings until a tag (here <br/>) is found
        while(next && next.nodeType != 1) {
            next = next.nextSibling;
            items.push(next);
        }
        // remove elements in reverse order
        while(var el = items.pop()){ el.parentNode.removeChild(el); }
        item.parentNode.removeChild(item);
  }

那里有一些注意事项：你不应该在一个块中多次使用同一个变量的“var”。 ID（C11，L11）应该是参数，而不是硬编码值。

删除子元素br

3 个答案: