JQuery 동적 div 추가 삭제 - jQuery dongjeog div chuga sagje

직군, 직무를 선택하면 하단에 태그처럼 표시가 되는 화면을 개발하고 싶다. 그런데 동적으로 생성한 div를 삭제하려고 하니까 삭제 시 카운트 처리가 이상하게 되는 것. 그리고 직무 select문 change메소드 안쪽에다가 삭제버튼 click 이벤트를 넣어야만 동작하고, 밖으로 빼니까 동작하지 않았다.

이유는 다음과 같다. select박스의 change가 일어나기 전까지 태그의 delete button은 없었던 것이기 때문에 select문 change메소드 밖에선 아예 버튼의 존재를 인지하지 못한다. 

요로코롬 해주니깐 동작이 잘 됐다. ♥

//직무 드롭다운 변경 시 해당 내용을 배열에 추가하고 tag노출. 배열은 submit 할 때 db로 넘어감
	var jikmus=[];
	var jikmuCnt=0;
	var jikmuNo=0;
	
	$('#positionAdd-jikmu').change(function(){
		var jikmuName=$('#positionAdd-jikmu option:selected').text();
		var jikmuCode=$('#positionAdd-jikmu option:selected').val();
		var addJikmuDiv="";
		console.log(jikmuName);
		console.log(jikmuCode);
	
		if(jikmuCnt>=3){
			alert('직무는 최대 3개까지만 선택 가능합니다.');
			return false;
		}else if(jikmus.includes(jikmuCode)){
			alert('이미 선택한 직무입니다.');
			return false;
		}else{
			jikmus.push("positionAdd-delJikmuBtn"+jikmuCode);
			console.log(jikmus);
			
			addJikmuDiv='<div class="positionAdd-selectedJikMuBound">';
			addJikmuDiv+='<label class="positionAdd-selectedJikmu">';
			addJikmuDiv+=jikmuName+"</label>";
			addJikmuDiv+='<button type="button" id="positionAdd-delJikmuBtn'+jikmuCode+'" class="positionAdd-delJikmuBtn">';
			addJikmuDiv+='<i class="fas fa-times"></i></button></div>';
			
			console.log(addJikmuDiv);
			
			$('#positionAdd-selectedJikMuBoundDivs').append(addJikmuDiv);
			jikmuCnt++;
			jikmuNo++;
		}
	});
	
	//요로코롬
	$(document).on('click', '.positionAdd-delJikmuBtn', function(){
	 	//직무 배열에서 빼주고 
		var jikmu=$(this).attr('id'); //형제의 텍스트값
		console.log(jikmu);
		console.log("인덱스: "+jikmus.indexOf(jikmu));
		jikmus.splice(jikmus.indexOf($(this)), 1); //배열에서 원소 제거
		//리무브 해주고
		$(this).parent().remove();
		jikmuCnt--;
	});

append(), remove() 함수를 사용하여 태그를 추가/삭제 해보자

List() 함수가 수행되면, 다음과 같이 div_List 태그 <div></div> 사이에 <li>테스트</li>가 추가된다.

그렇다면, List() 함수가 여러번 수행될 경우는? 다음과 같은 코드가 작성될 것이다.

만일, div 태그 내부의 요소들을 삭제 후 새로 append 시켜주고 싶을 경우 remove() 함수를 사용하여 내부 요소 들을 삭제해주는 코드를 추가해준다.

$("#div_List").remove(); 는 div 태그 전체를 모두 삭제해버린다.

div 태그 전체가 아닌 내부 요소만 삭제 하기 위해서는 $("#div_List *").remove(); 다음과 같이 작성해준다.

티스토리 뷰

버튼을 눌렀을 때 인덱스에 해당하는 DIV 레이어 추가/삭제하는 소스 입니다.

jQuery

<script>

$(function(){

$(클릭할버튼).click(function(){

addRow();

});

});

 function addRow(){

var html = "<div class=\"contents_row\"><div class=\"contents_col\"><input type=\"button\" name=\"add_btn\" value=\"+\"></div>";

$(임베드 할 div).append(html);

}

 function delRow(object){

var index = $("#list_detail .contents_row [name=del_btn]").index(object);

$("#list_detail .contents_row").eq(index).remove();

}

</script>

혹은, html 코드에 javascript:onClick 으로 위 함수를 호출해도 상관없습니다.

HTML

<div id="list_detail" style="display:table;"/>

<div class="contents_row" style="display:table-row"/>

<div class="contents_col" style="display:table-cell"/>

<div><input type="button" name="del_btn" value="del" onClick="javascript:delRow(this);/></div>

</div>

</div>

</div>

삭제 함수에서 쓴 인덱스 찾는 부분의 출처는 http://findfun.tistory.com 에 있습니다. 감사합니다.