Untitled

<html>

<head>

<title>JavaScript Comment Board</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<div class="pb-2 mt-4 mb-2 border-bottom">
    <h1>My Fake Blog</h1>
</div>

<div class="row col-md-8 col-md-offset-2">

<h2>Post About Thing</h2>

<p>
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
This is a wall of text. This is a wall of text. This is a wall of text.
</p>

<div class="card w-100">
    <h3 class="card-header">Add a comment</h3>
    <div class="card-body">
        <form>
            <div class="form-group">
                <input id="comment_name" type="textbox" class="form-control" placeholder="Name"/>
            </div>
            <div class="form-group">
                <textarea id="comment_text" rows="4" cols="60" class="form-control" placeholder="Comment"></textarea>
            </div>
            <div class="form-group">
                <button id="comment_submit_button" class="btn btn-primary" >Post</button>
            </div>
        </form>
    </div>
</div>

<div id="test" class="card w-100 mt-3">
    <div class="card-header">
        <div class="row">
            <div class="col-md-11">
                <h4 id="comment_board-userName">etomai</h4>
            </div>
            <div class="col-md-1">
                <button class="delete_btn" class="btn">X</button>
            </div>
        </div>
    </div>

    <div class="card-body">
        <p id="comment_board-userText">This is my comment.  I think the post is too long.</p>
    </div>
    <br>
</div>

<div></div>

</div>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="comment.js"></script>
<script src="js_moment.js"></script>

</script>

</body>

</html>

////////////////////////////////////////// jquery code below ////////////////////////////////////////////

$("#comment_submit_button").click(function()
{

    comment_name = $("#comment_name").val();
    comment_text = $("#comment_text").val();
    comment_date = moment().format("l");

    if(!/^[a-zA-Z0-9]+/.test(comment_name))
    {
        comment_name = "Error_User-Violation"

    }
    if(!comment_text.trim())
    {
        comment_text = "Error_Text_Violation"
    }

    comment_template = $("#test").clone();

    comment_template.find("#comment_board-userName").text(comment_name).append( "<br>"  + comment_date);
    comment_template.find("#comment_board-userText").text(comment_text);
    comment_template.insertBefore("#test");

    return false //equals like system("pause") in c++

})

$(document).on('click', '.delete_btn' , function()
{
    console.log("hu")
    $(this).find("#test").remove();
    console.log("nothing happen")


})