JavaScript to add and delete messages on the message board

<script>
        // Get the required element object var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        // Register event btn.onclick = function () { // Bind click event to publish button if (text.value == '') { // Determine whether text.value is empty, that is, whether the user has input content alert('You cannot publish empty content!');
                return false;
            } else { // If the user has input content, the content is obtained and assigned to the created element li for display // 1. Create element var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='javascript:;' title='Delete this message'>Delete</a>"; // Assign the content entered by the user to the created li element and add an a tag at the end for subsequent deletion of the message // 2. Add elements // ul.appendChild(li); // This way the message is appended to the later display ul.insertBefore(li, ul.children[0]); // Let the newly added message be displayed at the top, that is, in the order from bottom to top // Delete elements: Delete the li node where the current a tag is located, that is, its parent element var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        // The li element to be deleted is the parent element of a, that is, this.parentNode;
                        ul.removeChild(this.parentNode); // Delete the li node in ul, and li is the parent node of the current a tag, pay attention to the relationship between them}
                }
            }
            text.value = ''; // Finally, clear the content in the message input box to facilitate another message}
</script>

node.removeChild(child); // node is the parent element, child is a child element in node