添加/刪除子元素

Question

我正在使用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> 。

Answer 1

工作演示

如果您在導入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的盡頭。

Answer 2

試試這個jQuery代碼

如果父節點超過1個，則在obj之后添加

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