1

我正在使用 javascript 和 jQuery 在现有的<div>.

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

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

注意：包含表的 div 是子 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);
}

mySelf由于删除操作不起作用，因此未访问包含表的 div 控件的控件会出现问题。

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>

我无法获得<div>具有类的元素optionPane；每当我尝试针对 id 的父级时，<table>我都会得到<div>id contControls。

4

2 回答 2

1

工作演示

如果您遇到导入 jQuery 的麻烦，您不妨使用它。它简化了您尝试完成的所有 DOM 操作，并且您的代码可以简单地归结为这一点（请注意，javascript 字符串不能像您在不使用+for 连接的情况下那样跨越多行）：

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 中冒泡。

于 2012-09-04T09:59:23.087 回答
0

试试这个 jquery 代码

如果您有超过 1 个父节点，则在 obj 之后添加

$(obj).parent().remove();
于 2012-09-04T10:07:37.527 回答