Web, 게시판 만들기 - 댓글

이미지

 

입력

입력된 내용

댓글 삭제

---

HTML

<div id="container">
	<h1>jQuery Comment</h1>
	<div id="comment_write">
		<form id="comment_form">
			<div>
				<label for="user_name">작성자</label>
				<input type="text" name="user_name" id="user_name"/>
				<input type="submit" value="저장하기"/>
				<div id="error" style="font-size: 12px; font-weight:700; color: tomato;"></div>
			</div>

			<div>
				<label for="comment">덧글 내용</label>
				<textarea name="comment" id="comment"></textarea>
			</div>
		</form>
	</div>

	<!-- 동적 요소 -->
	<ul id="comment_list"></ul>
</div>

 

JavaScript

$('#comment_form').submit(function(){
	//유효성검사
	if(!($('#user_name').val())){
		$('#error').html('작성자를 입력해주세요.');
		$('#user_name').focus();
		return false;
	}

	if(!($('#comment').val())){ /* ... */ }

	let date = new Date();
	// 날짜 년,월,일 시간 구하는 구문
	// ...
	
	let today = `${yy}-${mm}-${dd} ${hh}:${mi}:${ss}`;
    
	//ul에 추가할 li
	var new_li = $('<li/>');
	new_li.addClass('comment_item');
    
	//쓴사람 정보 담을 p태그
	// ...
    
	//이름 담을 span태그
	var name_span = $('<span/>');
	name_span.addClass('name');
	name_span.html($('#user_name').val() + '님')
    
	//삭제 버튼 input태그
	var del_input = $('<input/>');
	del_input.attr({
		'type' : 'button',
		'value' : '삭제하기'
	})
	del_input.addClass('delete_btn');
    
	//댓글 내용 담을 p태그
	// ...
    
	//모든 내용을 하나에 담는다(추가) - 체인방식
	writer_p.append(name_span).append(date_span).append(del_input);
    
	//li에 모두 넣기
	new_li.append(writer_p).append(content_p);
	$('#comment_list').append(new_li);
    
	//초기화
	$('#user_name').val('');
	$('#comment').val('');
    
	//삭제버튼 클릭 시 내용 삭제
	$(document).on('click','.delete_btn', function(){
		if(confirm('선택하신 항목을 삭제하시겠습니까?')){
			$(this).parents('.comment_item').remove();
		}
	})
})

---

해석

 

태그 만들기

var new_li = $('<li/>');
new_li.addClass('comment_item');

 

의미 : new_li == <li class="comment_item"></li>

 

var name_span = $('<span/>');
name_span.addClass('name');
name_span.html($('#user_name').val() + '님')

의미 : <span class="name">$('#user_name').val() 님</span>

 

var del_input = $('<input/>');
	del_input.attr({
		'type' : 'button',
		'value' : '삭제하기'
	})
del_input.addClass('delete_btn');

의미 :  <input type="button" value="삭제하기" class="delete_btn"/>

---

합치기

writer_p.append(name_span).append(date_span).append(del_input);

의미 : <p class="writer">name_span, date_span, del_input</p>

 

new_li.append(writer_p).append(content_p);
$('#comment_list').append(new_li);

 

의미 :  ↓

<li class="comment_item">
	<p class="writer"> // writer_p
		<span class="name">$('#user_name').val() 님</span> // name_span, 
		<span> / today </span> // date_span, 
		<input type="button" value="삭제하기" class="delete_btn"/> // del_input
	</p>

	<p>comment</p> // content_p
</li>

 

---

삭제 버튼

 

삭제하기가 원래 있었던 요소가 아니고 동적인 요소이기 때문에 $('#del_btn').click(function(){});으로 처리하면 처리가 되지 않는다.

 

따라서 동적처리로 해야된다. -> on

 

li태그를 전체적으로 날려버리기 때문에 반드시 지울때 부모입장에서 지워야한다.
$(this).parents.('.comment_item').remove();

 

$(document).on('click','.delete_btn', function(){
	if(confirm('선택하신 항목을 삭제하시겠습니까?')){
		$(this).parents('.comment_item').remove();
	}
})