Question

以下是我的聊天模块的html代码。在其中我希望将Jquery代码添加到msg_header中的（青色）刷新按钮，这样每当我点击它时，我所有输入的消息都会被删除。

<!DOCTYPE html>
<html>
<head>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">.       
</script>
<script>
$(document).ready(function(){
$(".close").click(function(){
    $(".msg_box").hide();
});

$(".msg_head").click(function(){
    $(".msg_wrap").slideToggle("slow");
});

$('textarea').keypress(
function(e){
if(e.keyCode==13){
var msg=$(this).val();
$("<div class='msg_b'>"+msg+"</div>").insertBefore('.msg_insert');
}
});

});
</script>
<style>
.reload{
left:120px;
width: 15px;
height: 15px;
border: 1px solid cyan;
border-left-color: transparent;
border-radius: 25px;
transform: rotate(45deg);
position:relative;
}

.reload:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 11px;
border: 2px solid;
border-color: cyan transparent transparent cyan;
}
.msg_box{
cursor:pointer;
position:fixed;
bottom:0px;
right:20px;
background:white;
width:250px;
border-radius:5px 0px 0px 5px;
}

.msg_head{
background:#3498db;
padding:15px;
color:white;
border-radius:5px 0px 0px 5px;
height:15px;
}

.msg_box{
background:white;
width:250px;
bottom:-5px;

}

.msg_body{
height:250px;
font-size:12px;
overflow:auto;
overflow-x:hidden;
}

.msg_head{
background:#3498db
}

.close{
float:right;top:-10px;
}

.msg_input{
width:100%;
padding:5px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border: transparent;
border-top:1px solid #bdc3c7;
}

.msg_a{
min-height:15px; 
margin-top:5px;
padding:15px;
background:#99FFCC;
margin-left:20px;
margin-right:20px;
border-radius:5px;
position:relative;
}

.msg_a:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -30px;
top: 9px;
border: 15px solid;
border-color:transparent #99FFCC transparent transparent;
}

.msg_b{
min-height:15px; 
margin-top:5px;
padding:15px;
background:#FFFF99;
margin-left:20px;
margin-right:20px;
border-radius:5px;
position:relative;
}
.reload{left:175px;top:-18px;}


.msg_b:before
{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -29px;
top: 8px;
border: 15px solid;
border-color:transparent transparent transparent #FFFF99;
}

</style>
</head>
<body>
<div class="msg_box">
<div class="msg_head">Rishabh Sood
<div class="close"> X </div>
<div class="reload"></div>
</div>

<div class ="msg_wrap">
<div class ="msg_body">
<div class ="msg_a">Hey bro wassup!</div>
<div class ="msg_b">All nice!</div>
<div class="msg_insert"></div>
</div>
<div class="msg_footer"><textarea class="msg_input" rows="4"      placeholder="Enter Message"></textarea></div>
</div>
</body>
</html>

Answer 1

使用empty

    $(".close").click(function() {
      $(".msg_box").hide();
    });
    $(".reload").click(function() {
      $(".msg_body").empty();
    });
    $(".msg_head").click(function(e) {
      if (!$(e.target).is('.reload')) {
        $(".msg_wrap").slideToggle("slow");
      }

    });

   $('textarea').keypress(
  function(e) {
    if (e.keyCode == 13) {
      var msg = $(this).val();
      if(msg.trim().length > 0 ) {
      $("<div class='msg_b'>" + msg + "</div>").appendTo('.msg_body');
      $(this).val('');
      }
    }
  });

https://jsfiddle.net/f6kjhejs/3/

在聊天模块中通过div刷新div

1 个答案: