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

Como agregar el botón cerrar en div para cerrar el elemento
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

Te sugiero seguir leyendo...

  • Autor:
  • Categorias: Diseño Web CSS3 html5 javascript Tutorial

Como agregar el botón cerrar en div para cerrar el elemento Como agregar el botón cerrar en div para cerrar el elemento...
Tutoriales en linea
¿Te gusta el tutorial?





Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!