添加/删除子元素

我正在使用javascript和jQuery动态添加和删除现有<div>中的新元素。添加/删除子元素

添加一个新元素工作正常，但是当我点击“删除”删除元素时，我得到主容器对象，并且按钮内的子元素对象也存在并被点击。

现在问题出现了，当我尝试删除元素时，我得到的对象直到包含控件的html表格控件，但没有得到包含该表格的div。

注意：div包含的表格是子div /元素。与mySelf控制未访问包含该表的DIV控制，由于该删除操作不起作用发生

的Javascript

var ab = '<table rules="none" width="100%">'+ 
'<tr>'+ 
'<td class="optHdBg">'+ 
'<a><img src="themes/theme_blog/images/icons/delete.png" name="delete" önclick="javascript:remove_block(this);"/></a>'+ 
'</td></tr></table>'; 

function add() 
{ 
    var lstChild = $("#contControls").children().last(); 
    var containerElement = document.getElementById("contControls"); 
    var newElement = document.createElement("div"); 
    $(newElement).addClass("optionPane"); 
    newElement.innerHTML = ab; 
    document.getElementById("contControls").appendChild(newElement); 
} 

function remove_block(obj) 
{ 
    var mainContainer = $(obj).parents("div #contControls"); 
    var mySelf = obj.parentNode.parentNode.parentNode.parentNode.parentNode; 
    mainContainer.removeChild(mySelf); 
}

的问题。

HTML代码

<div id="contControls"> 
    <div class="optionPane"> 
    <table rules="none" width="100%"> 
     <tr> 
     <td class="optHdBg"> 
      <a> 
      <img src="themes/theme_blog/images/icons/delete.png" name="delete" önclick="javascript:remove_block(this);"/> 
      </a> 
     </td> 
     </tr> 
    </table> 
    </div> 
</div>

我不能够得到具有optionPane类<div>元素;每当我尝试定位<table>的父级时，我会得到<div>的ID为contControls。

来源

2012-09-04 Manish Kumar Namdev

你不能在新的生产线一样，他们只需要分割字符串正确连接起来后加上.. 。 – elclanrs

您是否尝试过首先清空mySelf？我似乎记得在删除一个元素时遇到了问题，而我在清除该元素之前通过清除元素来删除它。 – Gareth

@ Gareth yes mySelf对象未定义。其实我没有得到父控件，即div控件的表名类“optionPane”。如果我尝试获取**表**控件的父项，那么它将使持有这些新元素的主容器 –

Working Demo

如果你打算通过进口的jQuery的麻烦，你不妨使用它。它简化了所有你所要完成的DOM操作，你的代码归结为简单，就是（注意，JavaScript字符串不能跨越多行就像你正在做不使用+进行连结）：

var ab = '<table rules="none" width="100%">' 
+ '<tr><td class="optHdBg"><a>' 
+ '<img src="themes/theme_blog/images/icons/delete.png" name="delete" />' 
+ '</a></td></tr></table>'; 

$(document).ready(function() { 
    $(document).on('click', 'img[name="delete"]', function() { 
     remove_block(this); 
    });   
}); 

function add() { 
    $("<div class='optionPane'></div>").html(ab).appendTo("#contControls"); 
} 

function remove_block(obj) { 
    // remove the entire optionPane <div> 
    $(obj).closest('div.optionPane').remove(); 
}

此外，你应该注意的是在该行$(document).on('click'可以（也应该）与静态为准父元素要添加动态元素（可能是#contControls更换document，但我看不到你的HTML ）;这提供了更好的性能，因为事件不必像DOM那样冒泡。

来源

2012-09-04 09:59:23 nbrooks

试试这个jQuery代码

如果你有超过1个父节点则OBJ

$(obj).parent().remove();

来源

2012-09-04 10:07:37 Hkachhia

添加/删除子元素

回答

相关问题