Adding close button in div to close the box
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>
A simple close button:
<span id="close" onclick="this.parentNode.parentNode.remove(); return false;">x</span>
Add this inside your div:
.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;
}<br /><br />
<a class="fragment" href="google.com">
<div>
<span id='close' onclick='this.parentNode.parentNode.remove(); return false;'>x</span>
<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>You may also use something like this
window.onload = function(){
document.getElementById('close').onclick = function(){
this.parentNode.parentNode.remove();
return false;
};
};
window.onload = function(){
document.getElementById('close').onclick = () => {
this.parentNode.parentNode.remove();
return false;
};
};.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;
}<br /><br />
<a class="fragment" href="google.com">
<div>
<span id='close'>x</span>
<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>Styling
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;
}
window.onload = function(){
document.getElementById('close').onclick = function(){
this.parentNode.parentNode.remove();
return false;
};
};.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;
}
#close:hover {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
color:#fff;
}<br /><br />
<a class="fragment" href="google.com">
<div>
<span id='close'>x</span>
<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>