Question

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

一个学习实验是一个用户发布文本内容的网络应用程序，其他人可以通过按下＆＃34;回复＆＃34;在每个这样的帖子下找到按钮。

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

1）按下每个回复按钮后，在其下创建一个textarea和submit按钮。

2）但如果在特定回复按钮（已按下按钮）下已存在textarea和submit按钮，请删除这两个按钮。

3）删除整个文档中textarea和submit按钮的所有其他现有实例。

我写的代码不起作用。具体来说，它不会根据要求 3 删除submit按钮，而是留下它们的痕迹。请指教。

此外，效率对我来说也很重要，因此我想知道这种情况的最有效解决方案（如果要扩展）。

以下是我尝试的内容：

创建的id的{{1}}和相应的提交按钮分别为textarea和reply-message。

每个回复按钮的reply-ok（生成以前的元素＆＃39;创建）为class。

这是一个stacksnippet：

＆＃13;

rep

＆＃13;

var replyBtns = document.getElementsByClassName("rep");
// if replyBox already exists, hide it
for(var i = 0; i < replyBtns.length; i++) {
 replyBtns[i].addEventListener('click', function(e) {
  // Prevent submitting the form
   e.preventDefault();

   // e.target.parentNode.querySelector("#reply-message")
   var rm = this.parentNode.querySelector("#reply-message");
   if (rm != null) {
   	this.parentNode.removeChild(rm);
   	this.parentNode.removeChild(this.parentNode.querySelector("#reply-ok"));	
   
   } else {
   	var textarea = document.getElementById("reply-message");
   		if (textarea) { 
   		textarea.parentNode.removeChild(textarea);  
   		textarea.parentNode.removeChild(document.getElementById("reply-ok"));
   		}
   // Create the textarea and insert it in the form, in the next line
   var replyBox = document.createElement('textarea');
   	replyBox.setAttribute('id', 'reply-message');
    replyBox.setAttribute('placeholder', 'Reply');
   	// form is the parentNode of the button that was clicked on
   this.parentNode.insertAdjacentElement('beforeend', replyBox);
   
   var okBtn = document.createElement('button');
   	okBtn.classList.add('btn', 'bcb', 'bs', 'mts');
   	okBtn.setAttribute('style','border:none;height:25px;display:inline;');
   	okBtn.setAttribute('id','reply-ok');
   	okBtn.innerHTML = "OK";
   this.parentNode.insertAdjacentElement('beforeend', okBtn);
   }
 }, false);
}

＆＃13;

Answer 1

您收到空指针异常。

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

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

中交换两行

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

请注意，你还需要一个其他的，以防止创建新的文本区域（如果这是你想要的，我不确定我是否理解正确）

Answer 2

使用类概念...将公共类传递到文本区域和按钮..然后单击回复按钮首先删除所有现有文本区域并使用公共类作为选择器提交按钮...然后只需附加新创建的文本区域和提交按钮

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

2 个答案: