[Jquery] 클릭한 특정 영역 id,class 없이 삭제하기

제이쿼리를 이용해서 특정 영역을 삭제하는 방법이다

 

화면에서만 삭제할 수 도있고, 서버랑 통신을 통해 데이터를 삭제할 수도 있다

 

방법은 아래 예제와 같이 작동된다

---

1

예를 들어 아래와 같이 리스트 데이터를 가지고 왔을 때, 

JSTL을 이용해서 반복해서 데이터를 그려준다

 

그려줄 때, li 태그에 onclick 속성을 이용해서 remove함수를 호출해준다

 

remove 함수의 파라미터로는 this를 넣어주어 클릭한 li 태그를 지칭하게 해준다

 

만약 여기서 id나 class를 이용해서 지칭하게 하면, 

삭제 함수를 실행했을 때, 시스템 적으로 오류가 생길 수 있다

(중복 class가 들어가거나, 그러면 안되지만 id가 중복되거나 ..)

<tr style="border-bottom: 20px solid #fff;" class="mission-info" index="${status.index+1}" id="">
    <th>JSTL DATA</th>
    <td>
        <div class="wrapper">
            <ul class="ul">
                <li>    
                    <input id="inputData" class="inputData" type="text" placeholder="검색" />
                </li>
                <c:forEach items="${list}" var="list">
                    <li id="${list.id }" class="item" data-seq="${list.id}" onclick="remove(this)">
                        ${list.name }
                    </li>
                </c:forEach>
            </ul>
        </div>
    </td>
</tr>

 

2.

remove 함수 구현

 

화면 내에서 해당 영역을 지우는 함수다

remove 함수 내에 매개변수 this를 component라는 명칭으로 받은 다음

.remove() 함수를 이용해 삭제하는 Jquery 로직이다

 

아주간단하게 화면에서 해당 영역을 삭제할 수 있다

 

function remove(component) {
    $(component).remove();
}

 

또한, 실질적으로 데이터를 삭제한 후에 해당영역을 지우고 싶으면 다음과 같이 ajax를 이용해

API를 실행 후, 삭제하면 된다

function remove(component) {
    $.ajax({
        url: "remove", // url
        type: "DELETE", // requestMethod
        processData: false,
        contentType: false,
        data: formData,
        success: function(data) {
            // 1 : 삭제  else 0
            if(data == 1) {
                $(component).remove();
            }
        }
    });
    
}