Adding close button in div to close the box

Question

I have created a URL preview box for the entered URL.

Preview is shown in the div box. I want to add a close option on the right top. How could be done so that when users click on its box should be disabled?

Here is my fiddle.

<a class="fragment" href="google.com">     <div>     <img src ="http://placehold.it/116x116" alt="some description"/>      <h3>the title will go here</h3>         <h4> www.myurlwill.com </h4>     <p class="text">         this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc      </p> </div> </a> 

code is inside php

Answer 1

Most simple way (assumed you want to remove the element)

<span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span> 

Add this inside your div, an example here.

You may also use something like this

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

An Example Here.

Css for close button

#close {     float:right;     display:inline-block;     padding:2px 5px;     background:#ccc; } 

You may add a hover effect like

#close:hover {     float:right;     display:inline-block;     padding:2px 5px;     background:#ccc;     color:#fff; } 

Something like this one.

Answer 2

it's easy with the id of the div container : (I didn't put the close button inside the <a> because that's does work properly on all browser.

<div id="myDiv"> <button class="close" onclick="document.getElementById('myDiv').style.display='none'" >Close</button> <a class="fragment" href="http://google.com">     <div>     <img src ="http://placehold.it/116x116" alt="some description"/>      <h3>the title will go here</h3>         <h4> www.myurlwill.com </h4>     <p class="text">         this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etc this is a short description yada yada peanuts etcthis is a short description yada yada peanuts etc      </p> </div> </a> </div>