JavaScript to achieve a simple message board case

Use Javascript to implement a message board example (with message deletion) for your reference. The specific content is as follows

I am still learning the big front end. Please forgive me if there are any irregularities or incorrect ideas in the code. Thank you for your advice.

In the discussion area of some websites, we can usually see the message board function. Then when users comment, empty comments cannot be posted. The latest comments will be displayed, and the old comments will be pushed down. Then the blogger can delete the comments.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }

 body {
 padding: 100px;
 }

 textarea {
 width: 200px;
 height: 100px;
 border: 1px solid pink;
 outline: none;
 resize: none;
 }

 ul {
 margin-top: 50px;
 }

 li {
 list-style: none;
 width: 300px;
 padding: 5px;
 background-color: rgb(245, 209, 243);
 color: red;
 font-size: 14px;
 margin: 15px 0;
 }

 li a {
 float: right;
 text-decoration: none;
 }
 </style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>Publish</button>
<ul>

</ul>
<script>
 var btn = document.querySelector('button')
 var textarea = document.querySelector('textarea')
 var ul = document.querySelector('ul')
 btn.onclick = function () {
 if (textarea.value == '') {
 alert('Ning has no input')
 return false
 }else{
 var li = document.createElement('li')
 li.innerHTML=textarea.value+"<a href='javascript:;'>Delete</a>"
 ul.insertBefore(li,ul.children[0])
 var as=document.querySelectorAll('a')
 for (var i=0;i<as.length;i++){
 as[i].onclick=function () {
  ul.removeChild(this.parentNode)
 }
 }
 }
 }
</script>
</body>
</html>

Effect display

When comment is empty:

New comments will push old comments down:

When deleting:

Code Explanation

Here, when the button click event is triggered, the content in the text field is obtained, the function is triggered, and a judgment is made first to determine whether the value of the text field is empty. If so, a warning box pops up and the text content is not displayed below.

If the text box has content, then create an element li and use li to receive '. Then set the text content in li to the content of 1 in the text area + a tag (delete function).

Then set the newly added li to be displayed in the front, which is insertbefore. Then we need to bind the a tag in a loop, so that the row will be deleted when the a tag is clicked.

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.

You may also be interested in:

JS realizes message board function
jsp message board source code three: for jsp beginners.
How to use DOM operations to implement a simple message board in js
JS+CSS simulates a message board instance that can display content without refreshing
JS realizes the message board function [floor effect display]
Foldable message board implemented by js (with source code download)
jsp message board source code 2: for jsp beginners.
My ajax message board source code good application js
Code example of writing a message board using ReactJS and Python's Flask framework
jsp message board source code 1: for jsp beginners.

<<: Docker MQTT installation and use tutorial

>>: Introduction to Jenkins and how to deploy Jenkins with Docker