如何使用JavaScript中的按钮动态添加/删除父节点？

Question

我正在尝试使用带有添加和删除按钮的append子方法动态创建输入字段。 它将创建一个树状结构。 单击“添加”按钮，将创建一个带有“添加”和“删除”按钮的子节点。 再次点击子节点中的添加按钮，它需要创建一个子子节点。我手动完成。 但我需要动态添加子子节点（对于n个数字）。 如何使用java脚本中的append子方法动态添加它。

同样在单击“删除”按钮时，必须删除父节点。 如何获取动态生成的父节点ID？

function add_div(){
      var div1 = document.createElement('ul');
      document.body.appendChild(div1);
      div1.className = 'ui-modal';
      div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;
      var  check = div1.id;

      var list = document.createElement('li');

      list.className = 'msg1';
      div1.appendChild(list);

      var input = document.createElement('input');
      list.appendChild(input);
      input.placeholder="parent";

      var button1 = document.createElement('button');
      list.appendChild(button1);

      var t1 = document.createTextNode("ADD");
      button1.appendChild(t1);

      button1.addEventListener("click", add_div2);


      var button2 = document.createElement('button');
      list.appendChild(button2);

      var t2 = document.createTextNode("DEL");
      button2.appendChild(t2);

      button2.addEventListener("click", remove_div);



    function add_div2(){
      var div2 = document.createElement('ul');
      div1.appendChild(div2);

      var lists = document.createElement('li');
      div2.appendChild(lists);
      div2.className = 'sub-div';

      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;


      lists.className = 'msg2';
      div2.appendChild(lists);

      var inputs = document.createElement('input');
      lists.appendChild(inputs);
      inputs.placeholder="child";

      var button1s = document.createElement('button');
      lists.appendChild(button1s);

      var t1s = document.createTextNode("ADD");
      button1s.appendChild(t1s);

      button1s.addEventListener("click", add_div3);


      var button2s = document.createElement('button');
      lists.appendChild(button2s);

      var t2s = document.createTextNode("DEL");
      button2s.appendChild(t2s);

      button2s.addEventListener("click", remove_div);

    }
    
    function add_div3(){
      var div3 = document.createElement('ul');
      div1.appendChild(div3);

      var listss = document.createElement('li');
      div3.appendChild(listss);
      div3.className = 'inner-sub-div';

      div3.id = 'sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;


      listss.className = 'msg3';
      div3.appendChild(listss);

      var inputss = document.createElement('input');
      listss.appendChild(inputss);
      inputss.placeholder="sub child";

      var button1ss = document.createElement('button');
      listss.appendChild(button1ss);

      var t1ss = document.createTextNode("ADD");
      button1ss.appendChild(t1ss);

    


      var button2ss = document.createElement('button');
      listss.appendChild(button2ss);

      var t2ss = document.createTextNode("DEL");
      button2ss.appendChild(t2ss);

      button2ss.addEventListener("click", remove_div);

    }

    function remove_div(){
      var check = document.getElementById('test-0');
      check.parentNode.removeChild(check);
    }

  
}

.ui-modal{
    width: 200px;
    border: 1px solid red;
    position: relative;
    left:0;
    z-index: 55;
}
.sub-div{
    margin-top: 10px;
    width: 200px;
    height: 50px;
    left: 100px;
    border: 1px solid blue;
    position: relative;
    z-index: 66;
}
.inner-sub-div{
    margin-top: 10px;
    width: 200px;
    left: 250px;
    border: 1px solid blue;
    position: relative;
    z-index: 77;

}
.plus{
    border: 1px solid red;
    display: inline-block;
}

<div class="wrapper">
		<input type="button" value="ADD" onclick="add_div();">
</div>

该按钮也是使用append子方法生成的。添加侦听器事件。（即）在单击“添加”按钮时，输入字段将添加添加和删除按钮。 单击“添加”按钮时，节点将被添加。 但是点击删除按钮时，我无法获取ID。

我删除了一个id为test-0的父节点。

function remove_div(){
      var check = document.getElementById('test-0');
      check.parentNode.removeChild(check);
    }

但我想要动态删除它。 如何获得父节点的特定ID？

所有必须动态完成吗？ 我通过为每个字段命名来手动创建。

Answer 1

而不是试图获得正确的<?xml version="1.0" encoding="UTF-8"?> <Document xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:iso:std:iso:20022:tech:xsd:caaa.013.001.07"> <AccptrDgnstcReq> <Hdr> <MsgFctn>DGNP</MsgFctn> <PrtcolVrsn>6.0</PrtcolVrsn> <XchgId>378</XchgId> <CreDtTm>2013-08-08T22:18:35.07+02:00</CreDtTm> <InitgPty> <Id>66000001</Id> <Tp>OPOI</Tp> <Issr>ACQR</Issr> </InitgPty> <RcptPty> <Id>epas-acquirer-1</Id> <Tp>ACQR</Tp> </RcptPty> </Hdr> <DgnstcReq> <Envt> <Acqrr> <Id> <Id>9287351</Id> </Id> <ParamsVrsn>2013-08-07 08:00:00</ParamsVrsn> </Acqrr> <MrchntId> <Id>EPASMER001</Id> </MrchntId> <POIId> <Id>66000001</Id> <Tp>OPOI</Tp> <Issr>ACQR</Issr> </POIId> </Envt> </DgnstcReq> <SctyTrlr> <CnttTp>AUTH</CnttTp> <AuthntcdData> <Rcpt> <KEK> <KEKId> <KeyId>SpecV1TestKey</KeyId> <KeyVrsn>2010060715</KeyVrsn> <DerivtnId>OYclpQE=</DerivtnId> </KEKId> <KeyNcrptnAlgo> <Algo>DKP9</Algo> </KeyNcrptnAlgo> <NcrptdKey>4pAgABc=</NcrptdKey> </KEK> </Rcpt> <MACAlgo> <Algo>MCCS</Algo> </MACAlgo> <NcpsltdCntt> <CnttTp>DATA</CnttTp> </NcpsltdCntt> <MAC>3Dahc1K96Pc=</MAC> </AuthntcdData> </SctyTrlr> </AccptrDgnstcReq> </Document> ，
我建议您在ID中使用this关键字：

关于remove_div()的文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

请参阅工作代码段：

＆＃13;

＆＃13;

this

＆＃13;

function add_div() {
  var div1 = document.createElement('ul');
  document.body.appendChild(div1);
  div1.className = 'ui-modal';
  div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;
  var check = div1.id;

  var list = document.createElement('li');

  list.className = 'msg1';
  div1.appendChild(list);

  var input = document.createElement('input');
  list.appendChild(input);
  input.placeholder = "parent";

  var button1 = document.createElement('button');
  list.appendChild(button1);

  var t1 = document.createTextNode("ADD");
  button1.appendChild(t1);
  button1.addEventListener("click", add_div2);

  var button2 = document.createElement('button');
  list.appendChild(button2);

  var t2 = document.createTextNode("DEL");
  button2.appendChild(t2);

  button2.addEventListener("click", remove_div);
  

  function add_div2() {
    var div2 = document.createElement('ul');
    div1.appendChild(div2);

    var lists = document.createElement('li');
    div2.appendChild(lists);
    div2.className = 'sub-div';

    div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;

    lists.className = 'msg2';
    div2.appendChild(lists);

    var inputs = document.createElement('input');
    lists.appendChild(inputs);
    inputs.placeholder = "child";

    var button1s = document.createElement('button');
    lists.appendChild(button1s);

    var t1s = document.createTextNode("ADD");
    button1s.appendChild(t1s);

    button1s.addEventListener("click", add_div3);


    var button2s = document.createElement('button');
    lists.appendChild(button2s);

    var t2s = document.createTextNode("DEL");
    button2s.appendChild(t2s);

    button2s.addEventListener("click", remove_div);

  }

  function add_div3() {
    var div3 = document.createElement('ul');
    div1.appendChild(div3);

    var listss = document.createElement('li');
    div3.appendChild(listss);
    div3.className = 'inner-sub-div';

    div3.id = 'sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;

    listss.className = 'msg3';
    div3.appendChild(listss);

    var inputss = document.createElement('input');
    listss.appendChild(inputss);
    inputss.placeholder = "sub child";

    var button1ss = document.createElement('button');
    listss.appendChild(button1ss);

    var t1ss = document.createTextNode("ADD");
    button1ss.appendChild(t1ss);

    var button2ss = document.createElement('button');
    listss.appendChild(button2ss);

    var t2ss = document.createTextNode("DEL");
    button2ss.appendChild(t2ss);

    button2ss.addEventListener("click", remove_div);

  }

  function remove_div() {
    var check = this.closest("ul"); // TAKIT: Suggestion
    check.parentNode.removeChild(check);
  }

}

＆＃13;

.ui-modal {
  width: 200px;
  border: 1px solid red;
  position: relative;
  left: 0;
  z-index: 55;
}

.sub-div {
  margin-top: 10px;
  width: 200px;
  height: 50px;
  left: 100px;
  border: 1px solid blue;
  position: relative;
  z-index: 66;
}

.inner-sub-div {
  margin-top: 10px;
  width: 200px;
  left: 250px;
  border: 1px solid blue;
  position: relative;
  z-index: 77;
}

.plus {
  border: 1px solid red;
  display: inline-block;
}

＆＃13;

＆＃13;

＆＃13;

无论如何，我觉得你的整个代码都可以增强，因为你的所有<div class="wrapper"> <input type="button" value="ADD" onclick="add_div();"> </div>似乎都很相似。

⋅ ⋅ ⋅

因此，我将采取以下措施使您的代码更容易：

• 使用HTML创建不同的模板元素，以便HTML保持HTML格式
• 在模板元素中添加add_divx()并在其CSS中使用class
• 仅使用参数创建一个添加元素的函数。

我还删除了你的CSS，只添加了几行，只是为了让代码片段变得简洁直观。

以下是我最终的结果：

＆＃13;

＆＃13;

display: none;

＆＃13;

function append(level, elm) {
  if (!elm) elm = document.body;
  else elm = elm.closest('ul');
  var appended = document.querySelector('#temp' + level).children[0].cloneNode(true);
  elm.appendChild(appended);
}

function remove_div(button) {
  var elm = button.closest("ul");
  elm.parentNode.removeChild(elm);
}

＆＃13;

.templates { display: none; }

ul {
  background: rgba(255, 255, 255, 0.75);
  width: 200px;
  margin: 8px 0;
  padding-top: 4px;
  padding-bottom: 4px;
}

.level1 { border: 2px solid #f88; }
.level2 { border: 2px solid #8f8; }
.level3 { border: 2px solid #88f; }

＆＃13;

＆＃13;

＆＃13;

（我承认我喜欢它。）

希望它有所帮助。