<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
</head>
<style>
*{
box-sizing: border-box;
}
div{
margin: auto;
}
.wrapper{
width: 400px;
}
#input_box{
width: 75%;
height: 50px;
float: left;
overflow-y: auto;
padding: 5px;
border: 5px solid rgba(255,255,255,1);
background-color: #f4a548;
border-radius: 15px;
}
#btn_box{
width: 25%;
height: 50px;
float: left;
text-align: center;
line-height: 35px;
border: 5px solid rgba(255,255,255,1);
background-color: rgb(126,189,180);
border-radius: 15px;
}
#btn{
border: rgba(255,255,255,0);
background-color: rgba(255,255,255,0);
}
.comment_box{
width: 100%;
/* height: auto;*/
float: left;
position: relative;
padding: 5px;
border: 5px solid rgba(255,255,255,1);
word-break:break-all;
background-color: #f6d198;
border-radius: 15px;
}
.del_btn{
height: 20px;
width: 20px;
background-color: rgba(255,255,255,0);
color: rgba(0,0,0,0.5);
border: 0px;
position: absolute;
right: 0px;
bottom: 5px
}
</style>
<script>
$(function(){
$("#btn").on("click",function(){
if($("#input_box").html() == ""){
alert("입력값이 없습니다");
}else{
var line = $("<div class=comment_box></div>");
line.append($("#input_box").html());
line.append($("<input type=button value=x class=del_btn>"));
$(".wrapper").append(line);
$("#input_box").html("");
}
})
$(".wrapper").on("click",".del_btn",function(){
var result_del = confirm('삭제하시겠습니까?');
if(result_del){
$(this).parent().remove();
}else{}
})
})
</script>
<body>
<div class="wrapper">
<div id="input_box" contenteditable="true">
</div>
<div id ="btn_box">
<input type="button" value="comment" id="btn">
</div>
</div>
</body>
</html>