Не удается скрыть комментарий с помощью ajax после его создания с помощью веб-сокетов

Question

Я пытаюсь удалить комментарий, который я сделал, используя websockets с помощью ajax, и все работает нормально, и успешно комментарий был удален, но когда я пытаюсь скрыть его, ничего не происходит кажется, что я не могу использовать ajax после websockets, пока я не обновлюсь снова

js:

 if(newComment.action === 'create'){
        console.log(newComment.action)
        $(".review-box").append('<div id=comment_test'+newComment.comment_id+'>'+'<small>' + newComment.author + '</small><br>' + '<p>' + newComment.comment_text + '</p>'+'<a href="#" data-id='+newComment.comment_id+' class="dele">delete</a>'+'<br><hr></div>')
         $('.dele').on('click', function(e){
            e.preventDefault();
            var comment_id = $(this).attr('data-id')
            data = {
                comment_id : comment_id,
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            }

              $.ajax({
                type : "POST",
                url : "{% url 'delete_comment' %}",
                dataType:'json',

                data:data,

                success: function(data) {

                    console.log(data.ok)
                    console.log('comment_test'+comment_id)
                    document.getElementById('comment_test'+comment_id).innerHTML = ''



                },
                error:function(e){
                  console.log(e);
                }
              });


  })
    }   

HTML:

 <div class="tab-pane active" id="review">
                            <div class="review-box">
                                <div class="sec-title-two">
                                    <h3>2 Reviews For Bedroom Lamp</h3>
                                </div>
                                {% for comment in comments %}
                                <div id="comment_test{{comment.id}}">
                                <div class='col-sm-12 ' id="comments" value={{comment.id}}>
                                    <h5>{{ comment.author.username }}</h5>

                                    <p>{{ comment.comment_text }}</p>
                                </div>
                                 <form  method="POST">
                                    {% csrf_token %}

                                        <a href="#" data-id={{comment.id}} class="del">delete</a>
                                    </form>
                                  <br>
                                  <hr>
                                </div>
                                {% endfor %}

                            </div>
                            <div class="review-form">
                                <div class="sec-title-two">
                                    <h3>Add Your Review</h3>
                                </div>

                                <form action='' id='comments_form' method='POST'>
                                    <input type='hidden' id='user' value="{{ request.user.username }}" ,
                                        data-post='{{ product.slug }}'>
                                    {% csrf_token %}
                                    {{ form.as_p }}
                                    <input type='submit' class='btn btn-default' value='Submit'>
                                </form>
                            </div>
                        </div>

проблема в этой строке:

document.getElementById('comment_test'+comment_id).innerHTML = ''   

это не дает мне никаких ошибок, но в то же время ничего не происходит