Bir sohbet modülünde bir div tarafından div yenileyin

Aşağıdakiler, bir sohbet modülü için html kodum. İçinde msg_header'da bulunan (camgöbeği) yenileme düğmesine Jquery kodu eklemek istiyorum, böylece her tıkladığımda, girilen tüm mesajlar silinir.Bir sohbet modülünde bir div tarafından div yenileyin

<!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>

kaynak

2016-03-24 Rishabh Sood

böylece döngü düğmesi tıklandığında tüm iletileri temizlemek istiyorsanız empty? – 7urkm3n

Kullanım

$(".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/

kaynak

2016-03-24 05:24:47 madalinivascu

Teşekkür ederim, ama sadece girilen mesajları (önceden görüntülenmeyenleri) silmek istiyorsam ne yapacağım? –

, onlara belirli bir sınıf ekleyin ve ardından remove() ile kaldırın; – madalinivascu

Lütfen bir örnek verin –

Bir sohbet modülünde bir div tarafından div yenileyin

cevap

İlgili konular