jQuery implements a simple comment area

This article shares the specific code of jQuery to implement a simple comment area for your reference. The specific content is as follows

1. Let’s take a look at the effect first

①Click "Publish"

②Click "Delete Comment"

2. How to implement

First, we use HTML and CSS to write such an area:

HTML content:

<div id="box">
 <div id="fabu">
 <textarea placeholder="Please enter the content!!!" id="text"></textarea>
 </div>
 
 <button onclick="fun1()" id="btn_1">Publish</button>
 
 <div id="pinlun"> </div>
</div>

① Let's first write a big box to wrap all the contents inside

②Write a text, a publish button, and a comment area

③Click the button and the onclick event will execute the function fun1()

CSS content:

*{ 
 padding: 0;
 margin: 0;
 }
 #box{
 width: 600px;
 background-color: aqua;
 margin: 0 auto;
 }
 #fabu{
 width: 600px;
 height: 300px;
 background-color: burlywood;
 }
 #pinlu{
 width: 600px;
 background-color: aqua;
 }
 textarea{
 width: 600px;
 height:300px;
 border: none;
 background-color: burlywood;
 font-size: 24px;
 }
 #btn_1{
 width: 600px;
 height: 30px;
 background-color: cornflowerblue;
 outline: none;
 }
 ::placeholder{
 font-size: 24px;
 }
 #btn_2{
 width: 80px;
 height: 30px;
 background-color: brown;
 border-radius: 4px;
 
 }
 
 p{text-align: right;}
 #neirong{
 background-color: coral;
 border: 1px solid burlywood;
 
}

① *{} Let's first set the default inner and outer margins of all elements to 0

②Then set the corresponding styles for each element accordingly

③Use the ::placeholder pseudo-element tag to set the size of the prompt text

④ We do not set the height of the parent box and the div of the comment area, and let it expand according to the amount of comment content.

function fun1(){
 $('#pinlun').append(
  "<div id='neirong'>" + text.value+"<br><p><button id='btn_2'>Delete comment</button></p></div>");
  text.value="";}

 (function fun2() {
  $("#pinlun").on("click", "button", function() {
  $(this).parent().parent().remove();
 })})()

①jQuery uses $("selector") to get elements

②The append() method adds content (including tags) to the specified element

③When we click to execute fun1(), we also need to set the content to empty ( text.value="")

④Because the pixels that appear when you click are added by the browser later

1. So we cannot find the element if we bind the listener event directly (it will report that the element is undefined)
2. So we use jQuery to set an immediate execution function fun2()
3. The on method in fun2(): element a.on("listen event", "element in element a", try function), so you don't have to worry about whether the element is undefined

⑤Because the function is bound to the button, this is the button. To delete, we must delete the content of the div, and parent() is to find the parent element.

⑥The father of button's father is the added div, remove() method: delete the element

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.