如何删除javascript中的特定元素

我想创建一个函数，在我单击“添加新框”按钮时创建一个新框，然后，当我单击与框相关的特定删除按钮时，它还可以删除框。如何在javascript中创建函数？我应该为它创建的每个新元素保存在数组中吗

我的代码：

函数addBox（）{
var el=document.getElementById（'target'）；
var clone=el.cloneNode（真）；
var frame=document.getElementById（'container'）；
var attr=document.createAttribute（'val'）；
attr.value='demo'；
el.setAttributeNode（属性）；
子帧（克隆）；
}

添加框
删除框

JQuery：

function deleteBox(){
   $( "#target" ).remove();
}

Javascript:

function deleteBox(){
   document.getElementById('target').remove()
}

---

这是另一个示例，您可以在代码中尝试：）

var语句索引=1；
函数addstatement（）{
var n=句子索引；
var html=''+
''+
''+
''+
''+
'';
$（“#addSentenceDiv”）.append（html）；
句子索引=句子索引+1；
}
函数移除事件（id）{
console.log（id）；
$（“#句子框”+id）.remove（）；
}

试试这个

<div id="container">
      <div id="target" class="foo" val="demo">
        <div class="content">aaa</div>
        <button onclick="deleteBox(this);">Delete box</button>
      </div>
</div>
<button onclick="addBox();">Add box</button>


function addBox() {
  var el = document.getElementById('target');
  var clone = el.cloneNode(true);
  var frame = document.getElementById('container');
  var attr = document.createAttribute('val');
  attr.value = 'demo';
  el.setAttributeNode(attr);
  frame.appendChild(clone);
}
function deleteBox(obj){
    obj.parentElement.remove();
}

aaa
删除框
添加框
函数addBox（）{
var el=document.getElementById（'target'）；
var clone=el.cloneNode（真）；
var frame=document.getElementById（'container'）；
var attr=document.createAttribute（'val'）；
attr.value='demo'；
el.setAttributeNode（属性）；
子帧（克隆）；
}
函数删除框（obj）{
obj.parentElement.remove（）；
}

您需要使用

this

作为

deleteBox（）

函数的参数来定位按钮元素，然后使用

parentNode

将其作为按钮的父元素，然后对其应用

remove（）

方法：

函数addBox（）{
var el=document.getElementById（'target'）；
var clone=el.cloneNode（真）；
var frame=document.getElementById（'container'）；
var attr=document.createAttribute（'val'）；
attr.value='demo'；
el.setAttributeNode（属性）；
子帧（克隆）；
}
函数删除框（e）{
e、 parentNode.remove（）
}

.content{
宽度：100px；
高度：100px；
边缘底部：10px；
背景:#F5A623；
显示：内联块；
垂直对齐：中间对齐；
}

删除
添加框

为什么不在创建新框时向按钮添加id。单击一次，您可以使用

document.getElementById

<div id="container">
      <div id="target" class="foo" val="demo">
        <div class="content">aaa</div>
        <button onclick="deleteBox(this);">Delete box</button>
      </div>
</div>
<button onclick="addBox();">Add box</button>


function addBox() {
  var el = document.getElementById('target');
  var clone = el.cloneNode(true);
  var frame = document.getElementById('container');
  var attr = document.createAttribute('val');
  attr.value = 'demo';
  el.setAttributeNode(attr);
  frame.appendChild(clone);
}
function deleteBox(obj){
    obj.parentElement.remove();
}