그누보드 QA - 제이쿼리로 테이블 상위 하위 둘다 삭제하는기능

제이쿼리로 테이블 상위 하위 둘다 삭제하는기능

릴보이즈 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018.09.29 20:14:36 조회 2604 (58.♡.♡.239)

본문

안녕하세요

다름이 아니라 테이블이 이런식으로 있거든요

------------------------------------

테이블 상위 | [추가] [삭제]

------------------------------------

테이블 하위 | [삭제]

------------------------------------

테이블 상위에 삭제버튼을 누르면 상위+하위까지 삭제되고

테이블 하위에 삭제버튼을 누르면 하위만 삭제되게 기능을 만들려고합니다.

저 테이블이 두가지만 있는것이 아니라 경우에 따라서 추가될수도 있어요

상위 삭제버튼을 눌렀을때 상위 + 하위까지 지우려는 방법이 어려워서 도움을 요청해요 ㅠㅠ

고수님들 도와주세요

#그누보드5

답변 2

왕계란 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2018-10-01 01:48:18 124.♡.♡.218


$(function() {
    $(".remove-this").on("click", function(e) {
        e.preventDefault();
        if($(this).closest("tr").index() == 0) {
            $(this).closest("table").find("tr").remove();
        } else {
            $(this).closest("tr").remove();
        }
    });
});

http://jjiniyam.cafe24.com/temp/wrid_266291.html

↳ 릴보이즈 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2018-10-01 19:00:1758.♡.♡.239

감사합니다.

onlymilk47 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2018-09-29 23:24:25 222.♡.♡.142

상위에 삭제 버튼에 top_remove 로 class를 주시고

하위를 bottom_remove 로 주시면

jQuery(document).ready(function(){
   jQuery("tr").on("click", ".top_remove", function(){
       jQuery(this).latest("tr").nextAll("tr").remove();//하위테이블을 삭제
       jQuery(this).latest("tr").remove(); //본인 tr 삭제
   });
   jQuery("tr").on("click", ".bottm_remove", function(){
       jQuery(this).latest("tr").remove(); //본인 tr 삭제
   });
});

기본을 이렇게 잡으시고
만약에 상위 테이블이 추가가 있다면 해당 상위하위 테이블에 동일한 클래스를 이용하시고
삭제 버튼에 data-val 로 동일한 클래스값을 넣어 주시면

jQuery(document).ready(function(){
   jQuery("tr").on("click", ".top_remove", function(){
       var cla=jQuery(this).data("val");//동일한 클래스를 찾는다
       jQuery(this).latest("tr."+cla).nextAll("tr").remove();//동일한 클래스 값을 가지고 있는 하위테이블을 삭제
       jQuery(this).latest("tr").remove(); //본인 tr 삭제
   });
   jQuery("tr").on("click", ".bottm_remove", function(){
       jQuery(this).latest("tr").remove(); //본인 tr 삭제
   });
});