<body>
    <h1>Form Events</h1>
    <form action="/cats" id="commentForm">
        <input type="text" name="username" placeholder="Username">
        <input type="text" name="comment" placeholder="Comment Here">
        <button>Post</button>
    </form>

    <h2>Comments:</h2>
    <ul id="comments">
        <li>Test LI</li>
    </ul>

    <script src="app.js"></script>
</body>
//This code below works for already added LIs but not new ones
// const lis = document.querySelectorAll('li');
// for(let li of lis) {
//     li.addEventListener('click', function() {
//         li.remove();
//     })
// }


const commentForm = document.querySelector('#commentForm');
const commentsContainer = document.querySelector('#comments');

commentForm.addEventListener('submit', function(event){
    event.preventDefault();
    const usernameInput =commentForm.elements.username;
    const commentInput = commentForm.elements.comment;
    addComment(usernameInput.value, commentInput.value);
    usernameInput.value = '';
    commentInput.value = '';
});

const addComment = function(username, comment){
    const newComment = document.createElement('li');
    const bTag = document.createElement('b');
    bTag.append(username);
    newComment.append(bTag);
    newComment.append(` - ${comment}`);
    commentsContainer.append(newComment);
}

commentsContainer.addEventListener('click', function(event){
   // console.log('Clicked on the ul!');
   // console.log(event);

    event.target.nodeName === 'LI' && event.target.remove();
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.