Como agregar el botón cerrar en div para cerrar el elemento

En este tutorial les mostraremos varias manera de cerrar un elemento dentro de un div.


La vista previa se muestra en la casilla div y se ha agregado la opción Cerrar en la parte superior derecha. La forma más simple (asumiendo que desea eliminar el elemento).

<a class="fragment" href="https://tutorialesenlinea.es/">
    <div>
        <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
    <img src ="https://tutorialesenlinea.es/uploads/touch-icon-iphone.png" alt="some description"/> 
    <h3>El título irá aquí</h3>
        <h4> www.tutorialesenlinea.es </h4>
    <p class="text">
       Esto es una breve descripcion de lo que quieras colocar aqui. Esto es una breve descripcion de lo que quieras colocar aqui. Esto es una breve descripcion de lo que quieras colocar aqui. Esto es una breve descripcion de lo que quieras colocar aqui. Esto es una breve descripcion de lo que quieras colocar aqui. 
    </p>
</div>
</a>
</a>

<style>.fragment {
    font-size: 12px;
    font-family: tahoma;
    height: 140px;
    border: 1px solid #ccc;
    color: #555;
    display: block;
    padding: 10px;
    box-sizing: border-box;
    text-decoration: none;
}

.fragment:hover {
    box-shadow: 2px 2px 5px rgba(0,0,0,.2);

}

.fragment img { 
    float: left;
    margin-right: 10px;
}


.fragment h3 {
    padding: 0;
    margin: 0;
    color: #369;
}
.fragment h4 {
    padding: 0;
    margin: 0;
    color: #000;
}
#close {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
}</style>

Ver resultado


Ahora con JS.

<a class="fragment" href="https://tutorialesenlinea.es/">
    <div>
         <span id='close'>x</span>
    <img src ="https://tutorialesenlinea.es/uploads/touch-icon-iphone.png" alt="some description"/> 
    <h3>El título irá aquí</h3>
        <h4> www.tutorialesenlinea.es </h4>
    <p class="text">
       Esto es una breve descripcion de lo que quieras colocar aqui. Esto es una breve descripcion de lo que quieras colocar aqui. Esto es una breve descripcion de lo que quieras colocar aqui. Esto es una breve descripcion de lo que quieras colocar aqui. Esto es una breve descripcion de lo que quieras colocar aqui. 
    </p>
</div>
</a>
</a>

<script>window.onload = function(){
    document.getElementById('close').onclick = function(){
        this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
        return false;
    };
};</script>

Ver resultado