Javascript - 테이블에서 항목 이름을 제거 하시겠습니까?

Question

그래서 나는 테이블을 가지고 있습니다. 버튼을 클릭하면 정보가 추가되어 각 항목에 X 버튼이 추가되어 목록에서 삭제됩니다. 그 일을하려고했는데, X 버튼을 클릭하면 삭제 한 항목 이름을 콘솔에 출력합니다. 내가 어떻게 할 수 있니? 항목이 추가되어야 할 때

여기에, 호출되는 함수를

function sitaSeen(img, name, condition, price) { 
    $('tbody').append("<tr id='itemCart'><td><img src=" + img + "></td><td>" + name + "</td><td>" + condition + "</td><td>$" + price + "</td><td><span>X</span></td></tr>"); 

입니다.

다음은이 종류의 내 시도는하지만 그것은 OFC 실 거예요 작업 X 버튼 코드

$(document).ready(function() { 
    $('.sweet-container').on('click', 'tr span', function(){ 
     var removedname = $(this).closest('tr').ignore('span').text(); 
     console.log(removedname); 
     $(this).closest('tr').remove(); 
    }); 
}); 

입니다.

Answer 1

jQuery에 ignore() 메서드가 없으므로 콘솔에 오류가 발생합니다. 따라서 tr을 복제하고 복제 된 개체에서 span을 제거한 다음 텍스트를 가져 오거나 span이 포함되지 않은 모든 td를 가져 와서 텍스트를 가져 오십시오.

$(document).ready(function() { 
    $('.sweet-container').on('click', 'tr span', function(){ 
     var removedname = $(this).closest('tr').clone().remove('span').text(); 
     // or 
     // var removedname = $(this).closest('tr').find('td:not(:has(span))').text(); 
     console.log(removedname); 
     $(this).closest('tr').remove(); 
    }); 
}); 

---

UPDATE : 당신은 단지 두 번째 열은 단순히 :nth-child 또는 :eq() 선택기를 사용하여 원하기 때문에 (또는 eq()).

$(document).ready(function() { 
    $('.sweet-container').on('click', 'tr span', function(){ 
     var removedname = $(this).closest('tr').find('td:nth-child(2)').text(); 
     // or 
     // $(this).closest('tr').find('td:eq(1)').text(); 
     // or 
     // $(this).closest('tr').children().eq(1).text(); 
     console.log(removedname); 
     $(this).closest('tr').remove(); 
    }); 
}); 

Answer 2

나는 그것을 사용하는 것이 더있을 것 같아요 :

``` // 더 좋은 방법을 TR 요소에 도착

VAR trElem = $ (이) .parentNode.parentNode; ```

parentNode 속성은 요소의 부모에 액세스하는 더 좋은 방법입니다.

Answer 3

항목 이름은 두 번째 TD 그래서 당신이 사용할 수 있습니다 :

var removedname = $(this).closest('tr').find('td:eq(1)').text(); 

ID가 고유해야하기 때문에

내가 함수에 새로운 매개 변수를 추가했다.

function sitaSeen(seq, img, name, condition, price) { 
 
    $('tbody').append("<tr id='itemCart" + seq + "'>" + 
 
        "<td><img src=" + img + "></td>" + 
 
        "<td>" + name + seq + "</td>" + 
 
        "<td>" + condition + "</td>" + 
 
        "<td>$" + price + "</td>" + 
 
        "<td><span>X</span></td>" + 
 
        "</tr>"); 
 
} 
 
$(function() { 
 
    $('#addRow').on('click', function(e) { 
 
    var seq = +$(this).attr('data-seq'); 
 
    $(this).attr('data-seq', seq + 1); 
 
    sitaSeen(seq, 'img', 'name', 'condition', 'price'); 
 
    }); 
 

 
    $('.sweet-container').on('click', 'tr span', function(){ 
 
    var removedname = $(this).closest('tr').find('td:eq(1)').text(); 
 
    console.log(removedname); 
 
    $(this).closest('tr').remove(); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
 

 
<div class="sweet-container"> 
 
    <button id="addRow" data-seq="1">Add Row</button> 
 
    <table> 
 
     <tbody> 
 

 
     </tbody> 
 
    </table> 
 
</div>