How do you remove a created element with an element that was created

Question

Button that makes the box appear:

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

Where the box appears:

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

Function to create the box:

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

Delete the box when the remove button is pressed:

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

Dacre Denny · Accepted Answer · 2018-12-06 19:32:15Z

If I understand your question correctly, then this can be achieved by calling the remove() method on the box element to be removed. Adding this code:

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

at the point in your create() function where you defined the remove element like so:

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>

As an additional note, the preferred method of event binding to the DOM is via addEventListener() rather than assigning handler functions to events like onclick. To make use of addEventListener() in your code, you could rewrite:

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

As:

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

score 0 · Accepted Answer · 2018-12-06 20:24:48Z

The method you're looking for is ChildNode.remove():

The ChildNode.remove() method removes the object from the tree it belongs to.

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

At the same time, the main problem that I see with your code thus far is that it lacks encapsulation. Encapsulation is a word that has a lot of specific meanings attributed to it but it generally means that instances should be protected from other instances so that you always know which instance you're working on and you don't have to "find" it.

The easiest way to do this when working on DOM projects like this is to use Custom Elements

One of the key features of the Web Components standard is the ability to create custom elements that encapsulate your functionality on an HTML page, rather than having to make do with a long, nested batch of elements that together provide a custom page feature.

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

Below I've created a class that extends HTMLElement such as to implement an autonomous custom element. I've then separated the concerns, and implemented the click event handler for the .remove button.

Another thing to keep in mind is that id attributes must be unique within the document. This means that you should not be assigning an id attribute with the value remove to every remove button.

The id global attribute defines a unique identifier (ID) which must be unique in the whole document.

^{- 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>

Collectives™ on Stack Overflow

How do you remove a created element with an element that was created

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related