Question

使该框出现的按钮：

<button onclick="create()">create box</button>
<div id="trades"></div>

该框出现的位置：

<div class="box" id="duplicater"> 
</div>

创建框的功能：

function create() {

   var box = document.createElement("div");
   box.setAttribute('class', 'itembox')

   //delete button to remove the box
   var remove = document.createElement("span");
   remove.setAttribute('class', 'remove');
   remove.setAttribute('id', 'Remove')
   remove.innerText = "x";
   box.appendChild(remove);

   var holder = document.createElement("p");
   holder.setAttribute('class', 'output');

   holder.innerText = "The text in the box"
   box.appendChild(holder);

   var trades = document.getElementById("trades");
   trades.appendChild(box);
}

按下“删除”按钮时删除该框：

var removeItem = document.getElementById("Remove")[0];
   removeItem.onclick = function() {
   trades.removeChild(box)
}

Answer 1

如果我正确理解了您的问题，则可以通过在要删除的box元素上调用remove()方法来实现。添加此代码：

remove.onclick = function() {
    box.remove();
}

在create()函数中定义remove元素的位置，如下所示：

function create() {

  var box = document.createElement("div");
  box.setAttribute('class', 'itembox')

  //delete button to remove the box
  var remove = document.createElement("span");
  remove.setAttribute('class', 'remove');
  remove.setAttribute('id', 'Remove')
  remove.innerText = "x";
  box.appendChild(remove);

  // define onclick behavior for remove element
  // and call 'remove()' on the box element to
  // delete it as required
  remove.onclick = function() {
    box.remove();
  }

  var holder = document.createElement("p");
  holder.setAttribute('class', 'output');

  holder.innerText = "The text in the box"
  box.appendChild(holder);

  var trades = document.getElementById("trades");
  trades.appendChild(box);
}

<button onclick="create()">create box</button>
<div id="trades"></div>

作为附加说明，将事件绑定到DOM的首选方法是通过addEventListener()，而不是将处理程序函数分配给类似onclick的事件。要在代码中使用addEventListener()，可以重写：

remove.onclick = function() {
    box.remove();
}

为：

remove.addEventListener('click', function() {
    box.remove();
})

Answer 2

您要查找的方法是ChildNode.remove()：

ChildNode.remove（）方法从对象所属的树中删除该对象。

^{-https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove}

与此同时，到目前为止，我在您的代码中看到的主要问题是它缺乏封装。封装是一个具有很多特定含义的词，但是它通常意味着应该保护实例免受其他实例的侵害，这样您就可以始终知道您正在使用哪个实例，而不必“查找”该实例。

在处理此类DOM项目时，最简单的方法是使用Custom Elements

Web组件标准的主要功能之一是能够创建将您的功能封装在HTML页面上的自定义元素，而不必处理大量嵌套在一起的在一起提供自定义页面功能的元素。

^{-https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements}

下面，我创建了一个扩展HTMLElement的类，以实现自治的自定义元素。然后，我separated the concerns，并为.remove按钮实现了click事件处理程序。

要记住的另一件事是id属性在文档中必须是唯一的。这意味着您不应为每个remove按钮分配值为remove的id属性。

id全局属性定义一个唯一标识符（ID），该标识符在整个文档中必须是唯一的。

^{-https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}

class ItemBox extends HTMLElement {
    constructor() {
        super()
        // This must be done after the element is created because
        //   the element must not contain children upon creation
        setTimeout(_ => this.appendChildren(this.createChildren()))
    }
    createChildren() {
        return [
          this.createRemoveButton(),
          this.createOutputContainer()
        ]
    }
    appendChildren(children) {
        for(let child of children) {
            this.appendChild(child)
        }
    }
    createRemoveButton() {
        const element = document.createElement('span')
        element.classList.add('remove')
        element.innerText = `\u2715`
        element.addEventListener('click', event => this.remove())
        return element
    }
    createOutputContainer() {
        const element = document.createElement('p')
        element.classList.add('output')
        element.innerText = 'The text in the box'
        return element
    }
}
customElements.define('item-box', ItemBox)

const boxContainer = document.getElementById('box_container')
const createButton = document.getElementById('box_creator')
createButton.addEventListener('click', event => {
    boxContainer.appendChild(document.createElement('item-box'))
})

item-box {
    display: flex;
    flex-flow: row nowrap;
    background: #DDD;
    line-height: 1.5em;
    margin: 5px;
}
item-box .remove,
item-box .output {
    padding: 5px;
}
item-box .remove {
    cursor: pointer;
    user-select: none;
}
item-box .output {
    margin: 0;
}

<button id="box_creator">create box</button>
<div id="box_container"></div>

如何使用已创建的元素删除已创建的元素

2 个答案: