Javascript 用于创建和删除HTML元素的纯JS代码段

目前我是一名服务器端开发人员，正在学习纯Javascript的诀窍

一个学习实验是一个web应用程序，其中用户发布文本内容，其他人可以通过按下每个此类帖子下的回复按钮在其下进行评论

我想通过vanilla JS执行以下操作：

1当按下每个回复按钮时，在其下方创建一个文本区域和提交按钮

2但如果在按下某个特定回复按钮时，该按钮下已经存在textarea和submit按钮，则删除这两个按钮

3在整个文档中删除textarea和submit按钮的任何其他现有实例

我写的代码不起作用。具体地说，它没有按照要求3删除提交按钮，留下了它们的踪迹。请告知

此外，效率对我来说也很重要，所以我想知道这种情况下最有效的解决方案是否可以扩展

以下是我正在尝试的：

创建的textarea和相应的submit按钮的ID分别是reply message和reply ok

生成前一个元素创建的每个回复按钮的类是rep

下面是一个stacksnippet：

var replyBtns=document.getElementsByClassNamerep； //如果replyBox已经存在，请隐藏它 forvar i=0；i使用类概念。。。将公共类传递到文本区域和按钮。。单击回复按钮，首先删除所有现有的文本区域，并使用公共类作为选择器提交按钮。。然后只需添加新创建的文本区域和提交按钮

您将得到一个空指针异常

if (textarea) { 
    textarea.parentNode.removeChild(textarea);  
    textarea.parentNode.removeChild(document.getElementById("reply-ok"));
}

首先删除文本区域，然后期望能够访问文本区域的父级。但由于此时不存在文本区域，因此这是不可能的。您需要交换if中的两行：

if (textarea) {  
    textarea.parentNode.removeChild(document.getElementById("reply-ok"));
    textarea.parentNode.removeChild(textarea); 
}

---

请注意，为了防止创建新的文本区域，您还需要一个else，如果这是您想要的，我不确定我是否正确理解了HTML文档中元素的id应该是unique@guest271314：你说得对，它是无效的HTML。我已经恢复到类。在var rm=this.parentNode.querySelectorreply-message的JavaScript中仍然存在对重复ID的引用@guest271314:我正在为textarea和submit按钮使用ID。按照创建这些元素的方式，在任何一点上，整个文档中只有一个这样的元素。所以这将是独一无二的，不是吗？单凭JavaScript还不能确定。你能在stacksnippets上重现当前代码吗？空指针异常是一个很好的捕获。我犯了初学者的错误。谢谢你的帮助。另外，你能指导我如何更有效地处理此类情况吗？或者你觉得我写的代码还可以通过？这个问题确实没有简单的答案，但我认为你的代码没有任何重大缺陷。可能将您的函数拆分为多个函数，如addButton或类似的函数。我建议您研究如何调试html，例如使用br

---

owser控制台检查thrownYep（我在本例中忽略了调试控制台）是否存在任何异常，下次肯定会坚持使用它。关于效率，我的主旨是，如果某件事情可以做得更简单，我就不需要额外的迭代。来自服务器端的背景，这是我非常清楚的。对我来说，必须解析整个文档才能检索单个ID（例如document.getElementByIdreply message；）似乎有点过分；。我想这就是JS的工作方式，所以我会习惯的。好吧，你可以创建一个数组或类似的数据结构，并在每次创建/删除一个元素时更新它，这样你就不用再查看文档了