删除特定字段的Javascript方法

我想在一个div上附加多个字段以及一个remove按钮。类似于Gmail文件附加方法的东西如果用户按下移除按钮，它应该移除指定的p和按钮。但是，如果我按下删除按钮，它就不能正常工作，我知道javascript数组方法是问题所在，但我无法理解哪里出了问题

<form name="create" action ="">
  <input type="text" id="text">
  <button name="submit" onclick="attach()" type="button">Submit</button>
</form>
<div id="attach">
</div>
<script>
function attach(){
  var value =document.getElementById('text').value;
  var content = document.createElement('p'); // is a node
  content.className = 'element';
  // Insert text
  var btn = document.createElement("BUTTON");
  btn.innerHTML = "Delete This element";
  var i =0;

  btn.onclick = function(){
    console.log(i);
    remove(i);
    i++;
  };

  content.innerHTML = value;
  document.getElementById("attach").appendChild(content);
  document.getElementById("attach").appendChild(btn);
}

function remove(i){

  var elem = document.getElementsByClassName('element');
  elem[i].remove();
  return false;
}
</script>

提交
函数附加（）{
var value=document.getElementById（'text'）.value；
var content=document.createElement（'p'）；//是一个节点
content.className='element'；
//插入文本
var btn=document.createElement（“按钮”）；
btn.innerHTML=“删除此元素”；
var i=0；
btn.onclick=函数（）{
控制台日志（i）；
删除（i）；
i++；
};
content.innerHTML=值；
document.getElementById（“附件”）.appendChild（内容）；
文件.getElementById（“附件”）.appendChild（btn）；
}
功能删除（一）{
var elem=document.getElementsByClassName（'element'）；
elem[i].remove（）；
返回false；
}

正在工作的plunker在这里。

---

这里出了什么问题？如何修复此问题？

我们应该使用包装器将p&button包装在一起，以便在启动删除时删除完整的包装器

函数附加（）{
var value=document.getElementById（'text'）.value；
var content=document.createElement（'p'）；//是一个节点
var wrapper=document.createElement（'div'）；
wrapper.className=“wrapper”；
content.className='element'；
//插入文本
var btn=document.createElement（“按钮”）；
btn.innerHTML=“删除此元素”；
var i=0；
btn.onclick=函数（）{
控制台日志（i）；
删除（i）；
i++；
};
content.innerHTML=值；
appendChild（内容）；
appendChild（btn）；
document.getElementById（“附件”）.appendChild（包装器）；
}
功能删除（一）{
var elem=document.getElementsByClassName（'wrapper'）；
elem[i].remove（）；
返回false；
}

提交

简化原始示例的一种稍有不同的方法是利用为创建的按钮创建的函数/闭包。在这里，您可以直接引用

内容

和

btn

元素，并直接删除它们

函数附加（）{
var value=document.getElementById（'text'）.value；
var content=document.createElement（'p'）；//是一个节点
content.className='element'；
//插入文本
var btn=document.createElement（“按钮”）；
btn.className='element'；
btn.innerHTML=“删除此元素”；
btn.onclick=函数（）{
content.remove（）；
删除（）；
};
content.innerHTML=值；
var attach=document.getElementById（“attach”）；
附加.追加子项（内容）；
附加。附加子项（btn）；
}

提交

给你

函数附加（）{
const attachEl=document.getElementById（“attach”）；
常量值=document.getElementById（“文本”）.value；
const contentEl=document.createElement（“p”）；//是一个节点
contentEl.className=“元素”；
//插入文本
const btnEl=document.createElement（“按钮”）；
btnEl.innerHTML=“删除此元素”；
const wrapperEl=document.createElement（“div”）；
btnEl.onclick=函数（）{
拆下的附件（包装纸）；
};
附件（包装纸）；
appendChild（contentEl）；
包装器。附属物（btnEl）；
contentEl.innerHTML=值；
}

#附加{
背景色：青色；
}
.元素{
背景色：小麦；
}

提交

您预期的行为是什么？如果用户按下删除按钮，它应该将指定的p与按钮一起删除。我怀疑一个问题是您使用的

var I

。如果您将

P

和

按钮

标记放在一个公共

DIV

或其他东西中，然后在

onclick

中，您可能会有更好的运气，甚至您可以做一些更简单的事情，比如

this.parentElement.remove（）

来删除P和按钮。我已经尝试了一个用例，我添加了一个insert 1，2,3如果我按下第二个按钮，第一个按钮将被删除

Remove

将始终使用0调用。如果要使这样的东西起作用，您必须将

i

移动到全局范围。