Javascript 如何在评论部分隐藏多个回复按钮_Javascript_Jquery

Javascript 如何在评论部分隐藏多个回复按钮

javascript jquery

Javascript 如何在评论部分隐藏多个回复按钮,javascript,jquery,Javascript,Jquery,我有一个基本的聊天应用程序，我试图在其中添加一个用户能够回复特定评论的功能。每个独特的评论旁边都有一个回复按钮，读者可以通过该按钮对其进行回复现在要求是, 文本字段应仅出现在回复按钮的位置单击该按钮并单击“确定”按钮当用户点击特定回复按钮时，要求（1）应该满足，但立即单击另一个答复按钮，则上一个文本框和“确定”按钮应消失从上一个位置开始，而应该出现在当前单击的回复按钮，因此满足再次处理如果解决方案使用Javascript，而不使用任何库，那就太好了，但如果没有任何帮助，那么我也

我有一个基本的聊天应用程序，我试图在其中添加一个用户能够回复特定评论的功能。每个独特的评论旁边都有一个回复按钮，读者可以通过该按钮对其进行回复

现在要求是,

文本字段应仅出现在回复按钮的位置单击该按钮并单击“确定”按钮

当用户点击特定回复按钮时，要求（1）应该满足，但立即单击另一个答复按钮，则上一个文本框和“确定”按钮应消失从上一个位置开始，而应该出现在当前单击的回复按钮，因此满足再次处理

如果解决方案使用Javascript，而不使用任何库，那就太好了，但如果没有任何帮助，那么我也愿意使用jQuery解决方案

我编写的代码只允许我对第一条注释执行此操作，对其余注释不起作用。忽略{}命名法，因为这是Django语法。我的代码哪里出了问题

{% extends "base.html" %}
{% block content %}

<head>
<script type="text/javascript">
window.onload = function(){
document.getElementById("reply").addEventListener('click', function(event){
document.getElementById("reply").style.display = 'none';
var ok = document.createElement("BUTTON");
ok.innerHTML = 'OK';
var input = document.createElement("input");
input.type ='text';
input.name = "comment";
input.style.display = 'block';
document.getElementById('myForm').appendChild(input);
document.getElementById('myForm').appendChild(ok);
event.preventDefault();
  });
}

</script>

</head>

<div class="margin clb">
<h2>comment 1</h2>
<form id ="myForm" method='POST' action="{% url 'some_url' %}" aria-live="polite">
    {% csrf_token %}
    <button  id= "reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <br>
</form>

<h2>comment 2</h2>
<form id ="myForm" method='POST' action="{% url 'skin_doctor_price' %}" aria-live="polite">
    {% csrf_token %}
    <button id= "reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <br>

</form>

<h2>comment 3</h2>
<form id ="myForm" method='POST' action="{% url 'skin_doctor_price' %}" aria-live="polite">
    {% csrf_token %}
    <button id= "reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <br>

</form>

<h2>comment 4</h2>
<form id ="myForm" method='POST' action="{% url 'skin_doctor_price' %}" aria-live="polite">
    {% csrf_token %}
    <button id= "reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <br>

</form>

<h2>comment 5</h2>
<form id ="myForm" method='POST' action="{% url 'skin_doctor_price' %}" aria-live="polite">
    {% csrf_token %}
    <button id= "reply" type="submit" class="rep btn bcg bm mts mbl">reply</button>
    <br>

</form>
</div>

<br><br>

{% endblock %}

{%extends“base.html”%}
{%block content%}
window.onload=函数（）{
document.getElementById（“reply”）.addEventListener（'click'，函数（事件）{
document.getElementById（“reply”）.style.display='none'；
var ok=document.createElement（“按钮”）；
ok.innerHTML='ok'；
var输入=document.createElement（“输入”）；
input.type='text'；
input.name=“comment”；
input.style.display='block'；
document.getElementById（'myForm'）.appendChild（输入）；
document.getElementById（'myForm'）.appendChild（ok）；
event.preventDefault（）；
});
}
评论1
{%csrf_令牌%}
回复


评论2
{%csrf_令牌%}
回复


评论3
{%csrf_令牌%}
回复


评论4
{%csrf_令牌%}
回复


评论5
{%csrf_令牌%}
回复





{%endblock%}