bug addEventListenerを使用してテーブル内の行全体を削除する

タグ付きのセルをクリックしてテーブル内の行全体を削除する必要がありますが、他のセルをクリックするとその行は削除されます削除されました。ここではHTMLとaproachをバブリングイベントを使用して実証するために、以下のJSコードは次のとおりです。bug addEventListenerを使用してテーブル内の行全体を削除する

var table1 = document.querySelector("#tableOne"); 
 

 
table1.addEventListener("click", function(event) { 
 
    event.preventDefault(); 
 
    event.target.parentNode.parentNode.remove(); 
 
});

<html> 
 
<head></head> 
 
<body> 
 
    <table> 
 
      <thead> 
 
      <tr class="product"> 
 
       <td></td> 
 
       <td>Name</td> 
 
       <td>Amount</td> 
 
       <td>Price</td> 
 
       <td>Total</td> 
 
       <td><a href="" class="removeItem">(remove)</a></td> 
 
      </tr> 
 
      </thead> 
 
      <tbody id="tableOne"> 
 
      <tr class="product"> 
 
       <td><img src="imagens/tablet.jpg"></td> 
 
       <td>Tablet miPad 18</td> 
 
       <td>1</td> 
 
       <td>499.99</td> 
 
       <td class="item-total">499.99</td> 
 
       <td><a href="" class="removeItem">(remove)</a></td> 
 
      </tr> 
 
      <tr class="product"> 
 
       <td><img src="imagens/phone.png"></td> 
 
       <td>Telephone miPhone 18</td> 
 
       <td>2</td> 
 
       <td>199.99</td> 
 
       <td class="item-total">399.98</td> 
 
       <td><a href="" class="removeItem">(remove)</a></td> 
 
      </tr> 
 
      <tr class="product"> 
 
       <td><img src="imagens/shoe.jpg"></td> 
 
       <td>Shoe</td> 
 
       <td>1</td> 
 
       <td>99.99</td> 
 
       <td class="item-total">99.99</td> 
 
       <td><a href="" class="removeItem">(remove)</a></td> 
 
      </tr> 
 
      </tbody> 
 
      </table> 
 
     </body> 
 
     </html>

期待される結果は、私はいくつかを持っていることができれば、私は上をクリックした場合にのみ行を削除（削除）することですすべての.removeItemにEventListenerを追加する方法は素晴らしいでしょう。みんなとハッピーイースターありがとう！

出典

2017-04-16 Rayon Nunes

1） '）。 – TricksfortheWeb

あなたが唯一の目標はremoveItemリンクであるものにイベントをフィルタリングすることができます：リンク

var table1 = document.getElementById('tableOne'); 

table1.addEventListener('click', function (event) { 
    if (!event.target.classList.contains('removeItem')) { 
    return; 
    } 

    event.target.parentNode.parentNode.remove(); 
    event.preventDefault(); 
});

が、リンクがクリックされた場合のターゲットであることが保証されている場合にのみ動作することを心に留めておく、すなわち要素の子はありません。その問題とjQuery（ええ、私は知っている）を考えると、これは、より信頼性の高いです：

$("#tableOne").on('click', ".removeItem", function (e) { 
    $(this).closest(".product").remove(); 
    e.preventDefault(); 
});

テーブル行を動的に追加されていない場合、あなたは一人一人（疑わしいが、便利にイベントリスナーを追加することができます）：

var removeLinks = document.getElementsByClassName('removeItem'); 

for (var i = 0; i < removeLinks.length; i++) { 
    removeLinks[i].addEventListener('click', function (e) { 
    this.parentNode.parentNode.remove(); 
    e.preventDefault(); 
    }); 
}

、それはまた、上でjQueryの利便性をもたらすことが可能です：ちょうどあなただけのようにも `のdocument.getElementById（ 'テーブルを使用することができ、言っ

function closest(className, element) { 
    while (element && element.nodeType === 1) { 
    if (element.classList.contains(className)) { 
     return element; 
    } 
    } 

    return null; 
} 

var table1 = document.getElementById('tableOne'); 

table1.addEventListener('click', function (e) { 
    var link = closest('removeItem', e.target); 
    var row = closest('product', link); 

    if (!link) { 
    return; 
    } 

    row.remove(); 
    e.preventDefault(); 
});

出典

2017-04-16 04:03:58 Ryan

私はあなたの質問に私のコメントを見たのを見た:) – TricksfortheWeb

またはあなたは良い練習を知っている。 – TricksfortheWeb

@TricksfortheWeb：私は8秒で私の答えを書いていなかったので、後者=） – Ryan

bug addEventListenerを使用してテーブル内の行全体を削除する

答えて

関連する問題