Question

我使用此功能制作了元素：

    var counterUpload = 1;
     var limit = 20;
     function addUpload(divName){
     if (counterUpload == limit)  {
          alert("You have reached the limit of adding " + counterUpload + " inputs");
     }
     else {
      var newdiv = document.createElement('p');
          newdiv.innerHTML = " <label>Offences: * </label><input required=\"required 
                              \"style=   \"width:670px;\"type=\"text\"
                               name=\"offences["+counterUpload+"]\" 
                               id=\"offences["+counterUpload+"]\"> "
      document.getElementById(divName).appendChild(newdiv);
      counterUpload++;
     }

}

这是我的HTML

<fieldset class="ro5" id="ro5"> <legend>Add New:</legend> <p> <label>Offences: *  </label> <input name="offences" style="width:670px;" type="text" required="required"/>  </p>

divName将ro5作为参数

这是我到目前为止所尝试的：

function removeUpload(divName){
if (limit==counterUpload)  {
  alert("You have reached the limit of removing " + counterUpload + " inputs");
}
else {
  var newdiv = document.removeElement('p');
  if(
  newdiv.innerHTML = " <label>Offences: * </label><input required=\"required\" style=\"width:670px;\"type=\"text\" name=\"offences["+counterUpload+"]\" id=\"offences["+counterUpload+"]\"> "){
  document.getElementById(divName).removeChild(newdiv);}
  counterUpload--;
}

}

从目前为止的两个答案中，我已经设法提出这个但仍然没有完成工作，我感觉非常接近但是：

function removeUpload(divName) {
// Find the parent element
var parent = document.getElementById(divName);

if (parent) {
    // Find all the child nodes in parent element
    var children = parent.getElementsByTagName("P");
var num=count(children);
for(i = num; i >2 ; i--){
//i gave the P elements to remove an id="paraE" so that i do not remove other P elements //with out this id
    if( children[i].getAttribute('id') == 'paraE'){ 
        parent.removeChild(children[i]);
    } 
    }

}

如何删除元素？如何反转此函数以执行相反的工作？

Answer 1

简短回答

// create an element
var p = document.createElement("P");
p.innerHTML = "something";

// append to some other element
document.appendChild(p);

// delete it
p.parentNode.removeChild(p);

不要这样做

p.innerHTML = '<label>' + some_var + '</label>';

相反，以适当的方式创建

var label = document.createElement("LABEL");
label.innerHTML = some_var;

同样适用于表单元素

var form = document.createElement("FORM");
form.method = "post";
form.action = "some-url"; 

var input = document.createElement("INPUT");
input.type = "text";
input.name = "name";
input.value = ""; 

var button = document.createElement("INPUT");
button.type = "button";
button.name = "button";
button.value = "Submit"; 
button.onclick = function(){
    // do something
};

// append all form element to form and add the form to document
form.appendChild(input);
form.appendChild(button);
document.appendChild("form");

// want to delete all of it?
form.parentNode.removeChild(form);

更详细地删除元素

// Removing a specified element when knowing its parent node
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

// Removing a specified element without having to specify its parent node
var node = document.getElementById("nested");
if (node.parentNode) {
    node.parentNode.removeChild(node);
}

// Removing all children from an element
var element = document.getElementById("top");
while (element.firstChild) {
    element.removeChild(element.firstChild);
}

你的情况

// append it to DOM 
document.getElementById(divName).appendChild(newdiv);

// delete it / remove it from DOM
newdiv.parentNode.removeChild(newdiv);

让我们说，我正在使用你的函数创建一个元素，我不知道你的函数是如何在里面进行的。我所知道的是你的函数创建了一个元素并给了我作为回报的引用，所以，我称之为

// let's create a P element
var first_p = your_function('p'); 

// I have it now, and I can reach it by reference (first_p)
// if I want to delete it, I just call this
first_p.parentNode.removeChild(first_p);

// remove the n-th p element
function remove_p(n){
    var p = document.getElementsByTagName("P");
    for(i = 0; i < p.length; i++){
        if(p[i+1] == n){ 
            p[i].parentNode.removeChild(p[i]);
        } 
    }
}

Answer 2

这是第二个允许您删除孩子P元素的功能。

function removeUpload(id, num) {
    // Find the parent element
    var parent = document.getElementById(id);

    if (parent) {
        // Find all the child nodes in parent element
        var children = parent.getElementsByTagName('P');

        // If the child exists, remove it
        // We have to subtract 1 because `getElementsyTagName` returns an array
        if (children && children[num - 1) {
            parent.removeNode(children[num - 1]);
        }
    }
}

Answer 3

function removeUpload(element id) {
var myList =ro5.getElementsByTagName('P');//get total number of p elements available
// Find the parent element
var element = document.getElementById(element id);
var tot=myList.length-1;//subtract the one  P element without id="paraE"
if(tot>1)//make sure one p element remains visible always
{element.parentNode.removeChild(element);}
}

这就是诀窍。我基于@ rxgx和@ hex494D49的两个答案：谢谢加上这个链接：add/delete elements dynamically。很长一段时间后我想出了以上内容并且它正在运行..

删除动态创建的元素

3 个答案: