46

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

1
  • Disable or hide the box?
    – Martin
    Oct 31, 2013 at 10:54

8 Answers 8

74

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>

3
  • the first suggestion makes all the page blank after clicked
    – Ooker
    Sep 6, 2019 at 18:17
  • why three times parentNode? It worked. But i don't understand how?
    – Anish Arya
    Jan 17, 2020 at 11:29
  • Because, the element is nested in three parent nodes.
    – The Alpha
    Jan 17, 2020 at 11:54
11

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>
5

You can use this jsFiddle

And HTML:

<div id="previewBox">
    <button id="closeButton">Close</button>
<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>
</div>

With JS (jquery required):

$(document).ready(function() {
    $('#closeButton').on('click', function(e) { 
        $('#previewBox').remove(); 
    });
});
1
  • I used this on a cart page but I'm noticing that the buttons don't work if the cart contents are updated, something is removed, etc., after the cart updates with JS. I'm not entirely certain what, if anything, I should do to fix the issue given the possibility of JS conflicts with the eCommerce system. What are your thoughts?
    – Jeff W
    Mar 12, 2020 at 20:26
5

A jQuery solution: Add this button inside any element you want to be able to close:

<button type='button' class='close' onclick='$(this).parent().remove();'>×</button>

or to 'just' hide it:

<button type='button' class='close' onclick='$(this).parent().hide();'>×</button>
4

Here's the updated FIDDLE

Your HTML should look like this (I only added the button):

<a class="fragment" href="google.com">
    <button id="closeButton">close</button>
    <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>

and you should add the following CSS:

.fragment {
    position: relative;
}
#closeButton {
    position: absolute;
    top: 0;
    right: 0;
}

Then, to make the button actually work, you should add this javascript:

document.getElementById('closeButton').addEventListener('click', function(e) {
    e.preventDefault();
    this.parentNode.style.display = 'none';
}, false);

We're using e.preventDefault() here to prevent the anchor from following the link.

1

Updated your fiddle: http://jsfiddle.net/xftr5/11/ Hope, everything is clear?

$(document).ready(function() {
    $('.fragment i').on('click', function(e) { $(e.target).closest('a').remove(); });
});

Added jQuery and inserted an <i> as close trigger...

1
  • the code is probably correct but I'm not sure jquery is available
    – Asenar
    Oct 31, 2013 at 11:04
1

jQuery("#your_div_id").remove(); will completely remove the corresponding elements from the HTML DOM. So if you want to show the div on another event without a refresh, it will not be possible to retrieve the removed elements back unless you use AJAX.

jQuery("#your_div_id").toggle("slow"); will also could make unexpected results. As an Example when you select some element on your div which generates another div with a close button(which uses the same close functionality just as your previous div) it could make undesired behaviour.

So without using AJAX, a good solution for the close button would be as follows

HTML____________

<div id="your_div_id">
<span class="close_div" onclick="close_div(1)">&#10006</span>
</div>

JQUERY__________

function close_div(id) {
    if(id === 1) {
        jQuery("#your_div_id").hide();
    }
}

Now you can show the div, when another event occures as you wish... :-)

1
  • Doesn't it make much more sense to - instead of calling some function and introducing all kinds of extra ID's - to use onclick='$(this).parent().hide()' or onclick='$(this).parent().remove()'?
    – patrick
    Jul 1, 2016 at 23:04
0

Here is how I did it. The goal was to create a button (on clicking lets say another button/entity), AND add a remove mechanics to it. I added the following script to the javascript file-

        let newbtn = document.createElement("button");
        newbtn.innerHTML = 'whatever text you want the button to have';


       // the remove button
       let xspan = document.createElement('span');
       xspan.innerHTML = '<sup>X</sup>'; //this gives it superscript text
       xspan.id = 'close'; //this was not necessary but it is nice to have
       xspan.onclick = function () {
         newbtn.remove();
       };
       newbtn.appendChild(xspan);

This worked for me. I realize that the superscript could be substituted with more code that would perhaps give it more substance but the goal here is to give it an X to click on.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.