addEventListener를 사용하여 테이블의 전체 행을 삭제하는 버그

태그가있는 셀을 클릭하여 제거하려면 (삭제) 작동하지만 다른 셀을 클릭하면 행이 삭제됩니다. 제거되었습니다. 내가 몇 가지를 가질 수 있다면 내가 클릭 (제거)하는 경우에만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>

예상되는 결과 행을 제거하는 것입니다 : 여기에 HTML 아래 JS 코드 이벤트 버블 링 aproach를 사용하여 설명 할 수있다 모든 .removeItem에 EventListener를 추가하는 방법은 훌륭합니다. 모두와 행복한 부활절 감사합니다!

출처

2017-04-16 Rayon Nunes

당신이 단지뿐만 아니라'document.getElementById를 사용할 수, 말 ('테이블 하나')'. – 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를 편리를 가져다 가능 :

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

addEventListener를 사용하여 테이블의 전체 행을 삭제하는 버그

답변

관련 문제