jQuery(제이쿼리) 동적으로 생성된 요소 이벤트 및 index(인덱스) 가져오기

jQuery(제이쿼리) 동적으로 생성된 요소 이벤트 및 index(인덱스) 가져오기

---

한 개발자분이 ajax를 통해 동적으로 불러온 이미지 리스트 중 선택된 이미지를 삭제하는 것을 jQuery코드로 구현하고 있는데 클릭 이벤트 발생부터 애를 먹고 있었다. 해당 UI와 HTML코드는 아래와 같다.

동적으로 불러와진 이미지 목록

<!-- HTML --> 
<div class="car-image-list">
    <ul>
        <!-- 동적으로 불러와진 이미지 목록(li) -->
        <li><img src="/resources/images/..." alt="..."></li>
        <li><img src="/resources/images/..." alt="..."></li>
        <li><img src="/resources/images/..." alt="..."></li>
        <li><img src="/resources/images/..." alt="..."></li>
    </ul>
</div>

동적으로 불러온 이미지 목록이 아니었다면 아래와 같이 클릭한 X버튼이 속한 li태그의 삭제기능 jQuery코드로 구현할 수 있다.

//Javascript
$('.car-image-list li .btn-delete').on('click', function(){
    $(this).parent('li').remove();
});

하지만 ajax등을 통해 후에 불러와진 목록이라면 삭제버튼의 클릭이벤트 부터 먹통이 될 것이다. document가 로드됐을 당시에는 이미지 목록이 document에 없었기때문에 ".btn-delete"버튼 자체를 못찾는 것이다. 아래와 같이 document자체에 이벤트를 추가하여 이 문제를 해결할 수 있다. 

//Javascript
$(document).on('click', '.car-image-list li .btn-delete', function(){
    //...
});

click 이벤트는 발생시켰지만 click 이벤트의 주체가 document로 바뀌었기 때문에 "$(this).prent()"로는 해당 삭제버튼을 품고있는 li태그를 찾을 수 없다. 아래와 같이 click한 삭제버튼의 index를 찾아 그 index번째의 li를 삭제해주면 된다.

//Javascript
$(document).on('click', '.car-image-list li .btn-delete', function(){
    var idx = $('.car-image-list li .btn-delete').index(this);
    $('.car-image-list li').eq(idx).remove();
});

원하는데로 삭제버튼을 누른 해당 이미지가 삭제되는 기능이 추가되었다.

동적으로 생성된 요소의 index를 찾아 해당 요소를 삭제한다.

---

2020/02/04 - [JavaScript] - 제이쿼리 쿠키(jQuery Cookie) 활용하여 오늘 하루 보지 않기 기능 구현하기

제이쿼리 쿠키(jQuery Cookie) 활용하여 오늘 하루 보지 않기 기능 구현하기

2019/09/04 - [JavaScript] - 무한스크롤 (Infinity Scroll) UI 구현하기

무한스크롤 (Infinity Scroll) UI 구현하기

2019/08/30 - [업무 도움되는] - 변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style

변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style