![](/img/trans.png)
[英]Vanilla JS - Can add/remove class on child elements but all are active
[英]Add/remove child elements
我正在使用javascript和jQuery在现有的<div>
动态添加和删除新元素。
添加一个新元素可以正常工作,但是当我单击“删除”以删除该元素时,我得到了Main Container对象,并且按钮内的子元素对象也存在并被单击。
现在,当我尝试删除该元素时,问题就来了,直到包含该控件的html表格控件都在获取该对象,但没有获得包含该表的div。
注意:div包含的表是子div / element。
Java脚本
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);
}
由于无法执行删除操作,无法访问包含该表的div控件的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>
的父对象时,我都会得到ID为contControls
的<div>
。
如果您在导入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'
您可以( 并且应该 )将要添加动态元素的静态父元素替换为document
(可能是#contControls
,但我看不到)您的HTML);这样可以提供更好的性能,因为事件不必冒泡到DOM的尽头。
试试这个jQuery代码
如果父节点超过1个,则在obj之后添加
$(obj).parent().remove();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.