1

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>

IMAGEN DEL ACORDEÓN introducir la descripción de la imagen aquí

Espero haber sido lo bastante específico, gracias :)

1 respuesta 1

2

En general tienes un código bastante lioso, utilizas muchas const, no deberías hacerlo, utiliza mejor var o let. Si, las variables const solo se pueden declarar una vez, lo que haces es declararlas para posteriormente redeclararlas, para eso mejor usa let ya que hay variables que nunca usas fuera de unos eventos.

También se podría optimizar mas tu código, pero bien, los errores que tenias son errores de no revisarlo atentamente. Aquí te dejo la solucion comentada para que entiendas donde fallaste.

//ELEMENTOS PRINCIPALES
var cont = 0;
var btn_crearElemento = document.querySelector(".btn-crearElemento")
var contenedor_panel = document.querySelector(".contenedor-panel")
btn_crearElemento.addEventListener("click", function () {
    //CREACION DE VARIABLES CON SUS ATRIBUTOS EN DONDE SE ALOJARAN LOS DIV CREADOS
    var panel_ficha = document.createElement("div")
    panel_ficha.textContent = "panel_ficha"
    panel_ficha.contentEditable = true
    panel_ficha.classList.add("panel-ficha")
    var panel_aspecto = document.createElement("div")
    panel_aspecto.textContent = "panel_aspecto"
    panel_aspecto.classList.add("panel-aspecto")
    var panel_aspecto_descripcion = document.createElement("div")
    panel_aspecto_descripcion.innerHTML =
        'panel_aspecto_descripcion'+ cont +'<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")
    var 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")

    //-------------------------------
    var 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", () => {
        var panel_aspecto_descripcion2 = document.createElement("div")
        //tenias la clase de las imagnes mal puesta, en vez de - ponias _
        panel_aspecto_descripcion2.innerHTML =
            'panel_aspecto_descripcion'+ cont +' <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")

        var 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 SE DEBE ELIMINAR UNA CATEGORIA, PARA ESO EL USUARIO TENDRA QUE HACER CLICK EN EL IMG DEL TACHO DE BASURA

        //Tienes que meter el metodo que te elimina la categoria aqui
        //para que se escuche cada vez que creas una nueva categoria y no solo cuando
        //creas un desplegable

        //Usaste querySelector -> eso siempre te hara un return del primer elemento, en vez de eso usa querySelectorAll
        for (let botonEliminar of document.querySelectorAll(".img-panel-aspecto-descripcion")) {
            botonEliminar.addEventListener("click", eliminar);
        }
        cont ++;
    })
    for (let botonEliminar of document.querySelectorAll(".img-panel-aspecto-descripcion")) {
        botonEliminar.addEventListener("click", eliminar);
    }

})

function eliminar() {
    // panel_aspecto_descripcion.remove()
    // panel_aspecto_descripcion_indicadores.remove()
    //Estas eliminaciones no siven ya que siempre tendras asignado al ultimo elemento creado, tienes que eliminar la padre

    //eliminamos el texto -> padre(contenidor), y el hermano anterior del padre
    this.parentElement.previousSibling.remove();
    //y eliminamos al padre
    this.parentElement.remove();
}
.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;
        }
<input type="submit" class="btn-crearElemento" value="Crear menú desplegable">
<div class="contenedor-panel">
</div>

Espero que te sirva

1
  • Si, las variables const SOLO PUEDEN SER DECLARADAS UNA VEZ, el lo que hace es declararlas para posteriormente redeclararlas, para eso mejor usar let ya que hay variables que nunca usa fuera de unos eventos. Tambien, hay que decir, tambien se deberia usar var o let en este caso para la syntaxis mas correcta. el 14 mar. 2019 a las 14:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.