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
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;
};
};
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.