input field is returning <empty string>-CodePudding

I'm not sure why the input field is returning an empty string. Even if I write something in the input field, how can I fix this? Any help is appreciated!

   <div class="comment-form">
         <input type="number" name="postId" value="@post.Id" required hidden />
         <input type="text" name="theComment" id="thisIsTheComment" class="comment-input" placeholder="Add a comment..." rows="1" required/>
         <button type="submit" class="btnaddcomment color" id="btn_comment" onclick="AddComment(@post.Id, this)" ><i class="fas fa-paper-plane"></i></button>
    </div>

function AddComment(postId, ctrl) {
    ctrl.parentElement.remove();
    var someComment = document.getElementById("thisIsTheComment").value;
    console.log(someComment)
    var baseUrl = "https://localhost:44374/Comment/AddComment";
    var data = {
        postId: postId,
        theComment: someComment
    };
    axios.post(baseUrl, data)
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
        })
}

CodePudding user response：

It may be caused by the fact that you remove the element together with its parent.

If you remove the line ctrl.parentElement.remove();, or if you call it later, the code should work as expected.