Question

我在JavaScript中使用appendChild()创建了树状结构。单击“添加”按钮时，将添加根节点。单击根节点时，将添加父节点。单击父节点时，会添加子节点。

现在我尝试通过添加一个小图标来删除该添加。在单击该图标时，需要删除特定节点。

现在我尝试使用删除按钮。单击“删除”按钮后，根节点将被删除。但是只删除了一个节点。

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

因为我只调用了一个ID。如何调用该特定id来删除该节点。我已动态生成ID。

div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;

如何获取要删除的特定ID。单击根节点必须删除特定节点。类似于父节点和子节点

＆＃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;

  div1.innerHTML = '<li class="msg1"  onclick="event.stopPropagation();add_div2(this);">root</li>';
}

function remove_div() {
  var A = document.getElementById('test-0');
  A.parentNode.removeChild(A);
}

function add_div2(elem) {
  var div2 = document.createElement('ul');
  elem.appendChild(div2);

  div2.className = 'sub-div';

  div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
  div2.innerHTML = '<li class="msg2"  onclick="event.stopPropagation();add_div3(this);">parent</li>';

}

function add_div3(elem) {
  var div3 = document.createElement('ul');
  elem.appendChild(div3);
  div3.className = 'inner-sub-div';
  div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
  div3.innerHTML = '<li class="msg3" onclick="event.stopPropagation();">child</li>';
}

＆＃13;

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

＆＃13;

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

＆＃13;

我想获得点击了哪个根的特定ID。

Answer 1

我不确定这是不是你想要的：

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;

  div1.innerHTML = '<li class="msg1"  onclick="event.stopPropagation();add_div2(this);">root<button onclick="event.stopPropagation();remove_div(this);">-</button></li>';
  
}

function remove_div(target){
 // the div
 var A = target.parentNode.parentNode;
 A.parentNode.removeChild(A);
}

function add_div2(elem){
     var div2 = document.createElement('ul');
     elem.appendChild(div2);
  
      div2.className = 'sub-div';
    
      div2.id = 'sub_test-' + document.querySelectorAll('.sub-div > .msg2').length;
      div2.innerHTML = '<li class="msg2"  onclick="event.stopPropagation();add_div3(this);">parent<button onclick="event.stopPropagation();remove_div(this)">-</button></li>';
     
}

function add_div3(elem){
     var div3 = document.createElement('ul');
     elem.appendChild(div3);
      div3.className = 'inner-sub-div';
      div3.id = 'inner_sub_test-' + document.querySelectorAll('.inner-sub-div > .msg3').length;
      div3.innerHTML = '<li class="msg3" onclick="event.stopPropagation();">child<button onclick="event.stopPropagation();remove_div(this)">-</button></li>';
}

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

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

Answer 2

好的，基本上，您可以使用jQuery和.parent()函数轻松实现。你不需要一个按钮，你可以有一个带有类的图片/图标，并在其上应用click功能。这是下面的代码评论：

//this will add click function to the element with clickToRemove class, it can be any element h1 or image or icon. in this case i used h1 for testing only
    $(".clickToRemove").on("click", function(){   
// this line basically gets the clicked element parent and remove it.
      $(this).parent().remove(); 
    });

以下是jsfiddle，如果您需要更多帮助，请与我们联系。

编辑：我为其他想要使用它的人留下了上面的jQuery。下面是纯Javascript和新的jsfiddle。

//getting all the elements you decided for them to be act like a button 
var button = document.getElementsByClassName("removeParent");


//adding a click event to the clicked element
button[0].addEventListener("click", function(){

//the "this" word specifies that only get the clicked element parent
var parent = this.parentNode;

//remove parent
parent.remove();
});

这是jsfiddle

Answer 3

使用父div并将所有内容添加到其中： -

       
     function add_div(){
          var div1 = document.createElement('ul');
          document.getElementById("sam").appendChild(div1)
          div1.className = 'ui-modal';
          div1.id = 'test-' + document.querySelectorAll('.ui-modal > .msg1').length;
        
          div1.innerHTML = '<li class="msg1"  onclick="event.stopPropagation();add_div2(this);">root</li>';
        
          
        }
        
        function remove_div(){
            var list = document.getElementById("sam");
        list.removeChild(list.childNodes[0]);  
        }

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

如何删除自动生成id的父节点？如何指定id？

3 个答案: