A simple message board made of native js.
It has the following functions: 1. Input the text message in the input box; 2. Display the message on the message board; 3. Delete the message.
html and css code:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style> 6 *{margin:0; padding:0;} 7 #container{ 8 width:500px; 9 height:500px; 10 11 } 12 #sendMessage{ 13 width:500px; 14 height: 50px; 15 16 line-height:50px; 17 margin-bottom:30px; 18 } 19 #content{ 20 width:500px; 21 height: 400px; 22 border:1px solid #808080; 23 overflow: scroll; 24 } 25 #messColumn{width:300px;} 26 27 </style> 28 </head> 29 <body> 30 <div id="container"> 31 <div id="sendMessage"> 32 <input id="messColumn" type="text"> 33 <input id="btn" type="button" value="Leaving a message."> 34 </div> 35 <!--belong content Put a ul--> 36 <div id="content"></div> 37 </div>
js code:
1, When clicking the message button, create and add a div element in the div of the message board, and pass the content of the text box to this element.
2, Add the delete button to the div element, and add a click event to the delete.
3, When clicking the delete button, use the removeChild function to delete
1 var messCol=document.getElementById("messColumn"); 2 var btn=document.getElementById("btn"); 3 var con=document.getElementById("content"); 4 btn.onclick=function(){ 5 if(messCol.value.trim()==""){ 6 alert("The input cannot be empty or blank"); 7 return; 8 } 9 var messDiv=document.createElement("div"); 10 messDiv.setAttribute("style","width:450px;height:30px;border:2px dotted #808080;margin-bottom:5px;"); 11 { 12 //This code block is used to store the build messDiv Code for content:Message content and delete key style 13 var messCon = document.createElement("div"); 14 messCon.setAttribute("style","float:left;width:350px;height=30px;line-height:30px;overflow:auto;"); 15 var del = document.createElement("a"); 16 del.setAttribute("style","float:left;width:50px;height:30px;line-height:30px;"); 17 del.setAttribute("href","javascript:;"); 18 del.innerHTML = "delete"; 19 messDiv.appendChild(messCon); 20 messDiv.appendChild(del); 21 messCon.innerHTML=messCol.value; 22 del.onclick=function(){ 23 con.removeChild(this.parentNode); //Let parent element content Delete child element's messDiv 24 } 25 } 26 con.appendChild(messDiv); 27 messCol.value=""; //Clear the character content of the input box 28 }