1

javascript と jQuery を使用して、既存の .xml に新しい要素を動的に追加および削除してい<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>class を持つ要素を取得できませんoptionPane。の親をターゲットにしようとするたびに、 id<table>を取得します。<div>contControls

4

2 に答える 2

1

作業デモ

jQueryのインポートで問題が発生した場合は、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'ことができます（そしてそうすべきです）（おそらく、HTMLが表示されません）。これにより、イベントがDOMの上位までバブルする必要がないため、パフォーマンスが向上します。document#contControls

于 2012-09-04T09:59:23.087 に答える
0

このjqueryコードを試してください

親ノードが複数ある場合は、obj の後に追加します

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