jQuery 를 이용한 태그 추가, 삭제

<div>태그 추가하기

$( ).append( );

( ) <- div(class or id) 뒤에 추가됨

( ) <- html 변수

let img_html = "";
for (let i = 0; i < url.length; i++) {
        console.log("미리보기", url[i]);
        img_html += `<div class="img-preview${index}">
                  <img id="img-preview${index}" src="${url[i].url}" width="250" alt="미리보기">
                  <input id="url" type="hidden" name="img_url" value="${url[i].url}">
                  <input id="name" type="hidden" name="img_name" value="${url[i].name}">
                  <input id="size" type="hidden" name="img_size" value="${url[i].size}">
                  </div>`;
        document.getElementById("img-count").value = index;
}
$(".img-preview").append(img_html);

HTML에서 <div class="img-preview"> 뒤에 img_html 추가 됨.

<div>태그 삭제하기

const cancel = tag.parentNode.querySelector("#cancel-btn");
cancel.addEventListener("click", () => {
	$(".origin-img").remove(); //해당 <div class="origin-img"> 전체삭제
	$(".origin-img *").remove(); // *붙이면 내부 요소만 삭제
});

$(".origin-img").remove();

해당 <div class="origin-img"> 전체삭제

 

$(".origin-img *").remove(); 

* 붙이면 내부 요소만 삭제