添加/刪除子元素

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

添加/刪除子元素

回答

相關問題