0
376
Views¿Cómo crear un elemento al hacer clic que elimina el nodo principal del elemento?
Estoy tratando de hacer una copiadora de cajas que cree cajas, cada una de las cuales contiene un botón para borrarse. Cada cuadro es un duplicado de un cuadro de plantilla oculto, y cada uno tiene una identificación que comienza en box1 :
Esto es lo que tengo hasta ahora:
let boxcount = 0; function removebox() { this.parentNode.remove(); } function addbox() { var container = document.getElementById("container"), box = document.getElementById("boxoriginal"); var boxcopy = box.cloneNode(true); boxcount += 1; boxcopy.id = "box" + boxcount; container.appendChild(boxcopy); var remover = document.createElement("DIV"); remover.innerHTML = "x"; remover.onclick = removebox; document.getElementById(boxid).appendChild(remover); } El problema es que si hago clic en la X en box1 , por ejemplo, elimina el último cuadro que se acaba de agregar, en lugar de box1 . Probé algo similar usando EventListener pero con el mismo resultado.
Soy nuevo en JS, por lo que solo puedo suponer que no entiendo cómo funciona this .
·
Juan Pablo Isaza
1 answers
Answer question0
Tal vez no sea una solución perfecta para lo que está tratando de lograr, pero es posible que desee crear una estructura más parecida a:
let doc, bod, M, I, SimpleBoxMaker; // for use on other loads addEventListener('load', ()=>{ doc = document; bod = doc.body; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id); SimpleBoxMaker = function(appendTo = bod){ this.container = M('div'); this.addBox = contentNode=>{ const container = this.container, box = M('div'), x_div = M('div'); box.className = 'box_div'; x_div.className = 'x_div'; x_div.innerHTML = '×'; box.appendChild(x_div); if(contentNode)box.appendChild(contentNode); x_div.onclick = ()=>{ box.remove(); } container.appendChild(box); return this; } appendTo.appendChild(this.container); } // below code can be put on a separate page using a `load` Event (besides // end load line) const bigBox = new SimpleBoxMaker, addBox = I('add_box'); addBox.onclick = ()=>{ const div = M('div'); div.textContent = 'Before adding this node there were '+bigBox.container.children.length+' children in the container'; bigBox.addBox(div); } }); // end load *{ box-sizing:border-box: } .box_div{ min-height:30px; border:1px solid #000; margin-top:2px; } .x_div{ cursor:pointer; display:flex; justify-content:center; align-items:center; width:30px; height:30px; background:#900; color:#fff; font:bold 24px san-serif; text-align:center; float:right; } <button id='add_box'>Add Box</div>
·
Juan Pablo Isaza
Report
Answer question