我在
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.单击根节点必须删除特定节点.类似于父节点和子节点
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>';
}
.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();"> <input type="button" value="DELETE" onclick="remove_div();"> </div>
我想获得点击哪个根的特定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;
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>