js - jquery 동적으로 생성한 버튼 기능구현(delete)

이미지 미리보기를 구현할때, 파일을 선택하면 img와 img 삭제 버튼 태그를 동적으로 생성했다.

 $('#img-preview').append(`
      <div style="background : url(${reader.result}) no-repeat; background-size : cover">
        <button id="del" type="button">x</button>
      </div>
  `)

 

그런데 저 id가 del인 버튼에 클릭이벤트를 달아 콘솔에 찍어도 아무 반응이 없는 것!

당연하다. html이 렌더링이 된 후 생성한 태그는 못찾지 응응ㅋ

그럼 document 자체에서 찾으면 된다.

 $(document).on('click', '#del', function(e){
     e.currentTarget.parentElement.remove();
  });

따로 버튼에 data-id 속성을 지정하지않아도 이벤트리스너 e.currentTarget에 담겨있으니

선택한 element의 부모ele를 찾아 지우면 삭제 끗.