Question

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

我的代码：

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);
}

<div id="container">
  <div id="target" class="foo" val="demo">
    <div class="content" style="width:100px;height:100px;background:orange;margin:1px" ></div>
  </div>
</div>
<button onclick="addBox();">Add box</button>
<button onclick="deleteBox();">Delete box</button>

我想要像这样！

Answer 1

试试这个，

<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();
}

Answer 2

您需要使用this作为deleteBox()函数的参数来定位按钮元素，然后使用parentNode然后应用remove()方法按钮的父级在它上面：

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(e){
  e.parentNode.remove()
}

.content{
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  background: #F5A623;
  display: inline-block;
  vertical-align: middle;
}

<div id="container">
  <div id="target" class="foo" val="demo">
    <div class="content" style="width:100px;height:100px;background:orange;margin:1px"></div>
    <button onclick="deleteBox(this);">Delete</button>
  </div>
</div>
<button onclick="addBox();">Add box</button>

作为旁注，我强烈建议您在元素上使用唯一的ID。

Answer 3

JQuery的：

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

使用Javascript：

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

Answer 4

这是另一个例子，您可以尝试使用代码：）

var sentenceIndex = 1;
        function addSentence() {            
            var n = sentenceIndex;
            var html = '<div class="form-item-wrap" id="sentencebox' + n + '">'+
            '<div class="form-item">'+
            '<input class="form-control" type="text" id="sentence'+n+'" name="sentence[' + n + ']">'+
            '</div>'+
            '<div class="course-region-tool">'+
            '<a href="javascript:void(0);" onclick="removeSentence('+n+');" class="delete" title="delete">'+
            '<i class="icon md-recycle"></i></a></div></div>';
            $("#addSentenceDiv").append(html);
            sentenceIndex = sentenceIndex + 1;
        }
        function removeSentence(id) {
            console.log(id);
            $("#sentencebox"+id).remove();
        }

如何删除javascript

4 个答案: