Javascript 如何向新元素添加样式并在其创建时将其删除

我有一个javascript代码，就是单击按钮创建新元素，我有一个问题。 以下是我的javascript代码：

var comment = document.querySelector("#AddComment");
var req = new XMLHttpRequest();

if(comment){
    comment.addEventListener("click", function () {
        var csrftok = '{{ csrf_token }}';
        req.open('POST', '{{ request.path }}');
        CommentBlock = {
            "text": comment.previousElementSibling.value,
            //'csrfmiddlewaretoken': csrftok,
        };
        req.setRequestHeader('X-CSRFToken', csrftok);
        req.setRequestHeader("Content-Type", "application/json");
        req.onreadystatechange = function () {
            if(req.readyState == 4) {
                let text = document.createElement('div');
                text.innerHTML = req.responseText;
                let comment_blocks = text.querySelector("#comments").getElementsByClassName("commentblock");
                let new_block = comment_blocks[comment_blocks.length - 1];
                document.querySelector("#comment_addform").before(new_block);
            };
        };
        req.send(JSON.stringify(CommentBlock));
    });
}

我如何向这个新元素添加一个样式，它在创建时只会播放一次，并且在创建了这个元素并且不再需要这个样式时删除这个样式

UPD。我的html代码：

<div class="jumbotron col-md-7 col-md-push-2" id="comments" data-aos="fade-up">
{% for comment in post.comments.all %}
    {% if comment.is_parent %}
    <div class="commentblock">
        <div class="row">
            <div class="col-sm-2 col-md-2">
                <div class="thumbnail">
                    <img class="img-responsive user-photo" src="{{ comment.author.profile.image.url }}">
                </div>
            </div>

            <div class="col-sm-9 col-md-10">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong>{{ comment.author }}</strong> {# <span class="text-muted">commented 5 days ago</span> #}
                    </div>
                    <div class="panel-body">
                        {{ comment.text }}
                    </div>
                    <div class="panel-footer" id="answers_{{ comment.id }}">
                        {% for child in comment.children %}
                            <div class="answerblock">
                                <div class="row col-md-push-1">
                                    <div class="col-sm-2 col-md-2">
                                        <div class="thumbnail">
                                            <img class="img-responsive user-photo" src="{{ child.author.profile.image.url }}">
                                        </div>
                                    </div>
                                    <div class="col-sm-10 col-md-10">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <strong>{{ child.author }}</strong> {# <span class="text-muted">commented 5 days ago</span> #}
                                            </div>
                                            <div class="panel-body">
                                                {{ child.text }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                        <form method="post" id="answer_addform_{{ comment.id }}">
                            <div class="form-group">
                                {% csrf_token %}
                                <input type="hidden" name="parent_id" value="{{ comment.id }}">
                                {{ comment_form.text|add_class:'form-control'|attr:'cols:'|attr:'rows:' }}
                                <input type="reset" class="btn btn-sm btn-block AddAnswer" onclick="sendreqfor_answer(this)" value="Ответить"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

{%用于post.comments.all%中的注释}
{%if comment.is_parent%}
{{comment.author}{#5天前发表评论}
{{comment.text}
{comment.children%}
{{child.author}{#5天前发表评论}
{{child.text}
{%endfor%}
{%csrf_令牌%}
{{comment_form.text{add_class:'form-control'| attr:'cols:'| attr:'rows:'}}

如果我理解正确，您最好的选择是使用CSS动画

我不确定您试图为哪个元素设置动画，但假设该元素具有“commentblock”类。如果要使动画淡入淡出，则CSS代码可能如下所示：

---

您可以在这里找到更多详细信息：

将html代码发布到好的，我已经发布了

.commentblock {
    animation: custom 1s;
}

@keyframes custom {
    0% {
        display: block;
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}