Descartar elemento com ícone ou botão

Icone de descarte.

<div class="discard">
    <p class="txt_center">
        Clique no × localizado no canto superior direito para descartar este elemento.
    </p>
</div>

Para alterar o tamanho do ícone adicionar o atributo data-icon-size. O tamanho padrão é 38

<div class="discard" data-icon-size="55">
    <p class="txt_center"> Icon size × = 55 </p>
</div>

Para fechar um elemento parent de discard adicione a classe discard_this a ele.

<section class="discard_this">
    <div class="discard" data-icon-size="33">
        <p class="txt_center">
            Clique no × para descartar o elemento parent de discard, contendo a classe discard_this.
        </p>
    </div>
</section>

Botão de descarte.

Neste exemplo, a classe discard deve ser aplicada ao elemento button. Além disso, o botão deve conter o atributo data-close-element com o mesmo valor do elemento parent identificado pelo atributo id. Isso permitirá que o elemento parent seja descartado quando o botão for clicado.

<div id="discard-id-data">
    <p>Lorem ipsum laborum proident commodo quis aute dolor eu fugiat dolore</p>
    <div class="abs b0 r0 mb20 mr20">
        <button class="discard btn" data-close-element="discard-id-data">Fechar</button>
    </div>
</div>

.discard {
    position: relative;
}
.discard .close {
    position: absolute;
    top: 4px;
    right: 2px;
    cursor: pointer;
    overflow: hidden;
    color: #000;
    filter: drop-shadow(0 1px rgba(255, 255, 255, 0.18));
    z-index: 97;
}
.discard .close [icon=x] {
    position: absolute;
    top: 0;
    right: 0;
}

let discard = {
    dismiss: document.querySelectorAll(".discard"),
    close: function() {
        this.dismiss.forEach(element => {
            /* botao de descarte */
            if(element.hasAttribute("data-close-element")) {
                element.setAttribute("type", "button");
                var btnClose = document.getElementById(element.dataset.closeElement);
                element.addEventListener('click', event => {
                    if( btnClose && btnClose.hasAttribute("id") && btnClose.id == element.dataset.closeElement) {
                        event.preventDefault();
                        fade.out.query(btnClose, 800);
                    }
                    else { 
                        console.info(`Nenhum elemento com atributo "id".\nOu o atributo "id" não é igual o valor do atributo "data-close-element".`);
                    }
                });
            }
            /* icone de discarte */
            else {
                var size;
                if(element.hasAttribute("data-icon-size")) {
                    size = element.dataset.iconSize;
                } else {
                    size = "38";
                }
                var iconClose = document.createElement("div");
                iconClose.classList.add("close");
                var sz = parseInt(size);
                var calcSize = sz - (sz * .46);
                iconClose.style.width = calcSize+'px';
                iconClose.style.height = calcSize+'px';
                iconClose.innerHTML = `
                    Fechar ou ocultar
                `;
                element.prepend(iconClose);

                if(element.closest(".discard_this") ) {
                    iconClose.addEventListener('click', event => {
                        event.preventDefault();
                        fade.out.selector(".discard_this", 800);
                    });
                }
                else {
                    iconClose.addEventListener('click', event => {
                        event.preventDefault();
                        fade.out.query(element, 800);
                    });
                }
            }
        });
    }
}.close();