<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id='like'>좋아요</button><span>0</span>
<br>
<input type="text"><button class='writeCom'>댓글작성</button>
<br>
<div id="com">
<p>첫댓글<button class='removeCom'>삭제</button></p>
</div>
<script>
// 1. 좋아요 클릭 시, 좋아요 수가 1로 늘어나고
// 버튼은 좋아요 취소로 바뀜
$(document).on('click','#like',function(){
$(this).text('좋아요취소')
$('#like+span').text(1)
$(this).removeAttr('id','like')
$(this).attr('id','dislike')
})
// 2. 좋아요 취소 클릭 시, 좋아요 수가 0으로 줄고
// 버튼은 다시 좋아요로 바뀜
$(document).on('click','#dislike',function(){
$(this).text('좋아요')
$('#dislike+span').text(0)
$(this).removeAttr('id','dislike')
$(this).attr('id','like')
})
// 3. 댓글 작성 시, 목록의 맨 위에 댓글이 추가
$('.writeCom').click(function(){
let val = $('input[type=text]').val()
$('#com').prepend("<p>"+val+"<button class='removeCom'>삭제</button></p>")
})
// 4. 삭제 버튼시, 그 댓글만! 삭제
$(document).on('click','.removeCom',function(){
$(this).parent().remove()
})
</script>
</body>
</html>
