Buen día, estoy creando un acordeón editable con javascript, pero tengo problemas para eliminar una categoría de un propio acordeón.
JAVASCRIPT
//ELEMENTOS PRINCIPALES
let btn_crearElemento = document.querySelector(".btn-crearElemento")
const contenedor_panel = document.querySelector(".contenedor-panel")
btn_crearElemento.addEventListener("click", function() {
//CREACION DE VARIABLES CON SUS ATRIBUTOS EN DONDE SE ALOJARAN LOS DIV CREADOS
const panel_ficha = document.createElement("div")
panel_ficha.textContent = "panel_ficha"
panel_ficha.contentEditable = true
panel_ficha.classList.add("panel-ficha")
const panel_aspecto = document.createElement("div")
panel_aspecto.textContent = "panel_aspecto"
panel_aspecto.classList.add("panel-aspecto")
const panel_aspecto_descripcion = document.createElement("div")
panel_aspecto_descripcion.innerHTML = 'panel_aspecto_descripcion <img class="img-panel-aspecto-descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png">'
panel_aspecto_descripcion.contentEditable = false
panel_aspecto_descripcion.classList.add("panel-aspecto-descripcion")
const panel_aspecto_descripcion_indicadores = document.createElement("div")
panel_aspecto_descripcion_indicadores.textContent = "panel_aspecto_descripcion_indicadores"
panel_aspecto_descripcion_indicadores.classList.add("panel-aspecto-descripcion-indicadores")
//-------------------------------
const boton_aspecto = document.createElement("input")
boton_aspecto.setAttribute("type", "submit")
boton_aspecto.setAttribute("value", "AGREGAR UNA CATEGORIA")
//-------------------------------
contenedor_panel.appendChild(panel_ficha)
contenedor_panel.appendChild(panel_aspecto)
panel_aspecto.appendChild(panel_aspecto_descripcion)
panel_aspecto.appendChild(panel_aspecto_descripcion_indicadores)
//--------------------------------
panel_aspecto_descripcion_indicadores.after(boton_aspecto)
//-------------------------------
//AQUI ESTAREMOS CREANDO CATEGORIAS DE UN ACORDEON CUANDO EL USUARIO DE CLICK
boton_aspecto.addEventListener("click", () => {
const panel_aspecto_descripcion2 = document.createElement("div")
panel_aspecto_descripcion2.innerHTML = 'panel_aspecto_descripcion <img class="img_panel_aspecto_descripcion" title="eliminar" src="https://img.icons8.com/ios/20/000000/waste-filled.png">'
panel_aspecto_descripcion2.contentEditable = false
panel_aspecto_descripcion2.classList.add("panel-aspecto-descripcion")
const panel_aspecto_descripcion_indicadores2 = document.createElement("div")
panel_aspecto_descripcion_indicadores2.textContent = "panel_aspecto_descripcion_indicadores"
panel_aspecto_descripcion_indicadores2.classList.add("panel-aspecto-descripcion-indicadores")
panel_aspecto.appendChild(panel_aspecto_descripcion2)
panel_aspecto.appendChild(panel_aspecto_descripcion_indicadores2)
boton_aspecto.remove()
panel_aspecto_descripcion_indicadores2.after(boton_aspecto)
})
//AQUI OBTENEMOS EL IMG DEL TACHO DE BASURA
const img_panel_aspecto_descripcion = document.querySelector(".img-panel-aspecto-descripcion")
//AQUI SE DEBE ELIMINAR UNA CATEGORIA, PARA ESO EL USUARIO TENDRA QUE HACER CLICK EN EL IMG DEL TACHO DE BASURA
img_panel_aspecto_descripcion.addEventListener("click", () => {
panel_aspecto_descripcion.remove()
panel_aspecto_descripcion_indicadores.remove()
})
})
CSS
.contenedor-panel{
/* display: flex;
flex-direction: column; */
width: 100%;
font-weight: 700;
font-size: 16px;
}
.panel-ficha{
background: #f5f5f5;
border: 1px solid #ddd;
padding: 10px 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 2px 1px rgba(0,0,0,.05);
cursor: pointer;
margin-bottom: 20px;
}
.panel-aspecto{
display: none;
}
.panel-aspecto-descripcion-indicadores{
display: none;
}
/*------------------------------------*/
.panel-aspecto-descripcion{
width: 100%;
font-weight: 700;
font-size: 16px;
background: #D7CCC8;
border: 1px solid #A1887F;
padding: 10px 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 2px 10px #BCAAA4;
cursor: pointer;
margin-bottom: 10px;
}
/*---------------------------------------*/
.panel-aspecto-descripcion-indicadores-descripcion{
width: 100%;
font-weight: 700;
font-size: 16px;
background: #FFFDE7;
border: 1px solid #FFF9C4;
padding: 10px 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 2px 10px #BCAAA4;
cursor: pointer;
margin-bottom: 10px;
}
/*---------------------------------------*/
.estilos-ficha-supervision{
font-size: 14px;
line-height: 1.42857143;
}
.panel-aspecto-descripcion {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px 15px;
}
HTML
<input type="submit" class="btn-crearElemento" value="Crear menú desplegable">
<div class="contenedor-panel">
</div>
Espero haber sido lo bastante específico, gracias :)