在div中添加关闭按钮以关闭该框

Question

我为输入的网址创建了网址预览框.

预览显示在div框中.我想在右上角添加关闭选项.怎么办才能在用户点击它时禁用它.

这是我的小提琴.

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

代码在里面php

Answer 1

最简单的方法(假设您要删除元素)

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

添加这是你的内部div,一个在这里例子.

你也可以使用这样的东西

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

这里的一个例子.

Css关闭按钮

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

像这样的东西.

Answer 2

使用div容器的id很容易:(我没有把关闭按钮放在里面,<a>因为它在所有浏览器上都能正常工作.

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

Answer 3

你可以使用这个jsFiddle

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

使用JS（需要 jquery）：

$(document).ready(function() {
    $('#closeButton').on('click', function(e) { 
        $('#previewBox').remove(); 
    });
});

Answer 4

jQuery 解决方案：将此按钮添加到您希望能够关闭的任何元素内：

\n\n

<button type='button' class='close' onclick='$(this).parent().remove();'>\xc3\x97</button>\n

\n\n

或者“只是”隐藏它：

\n\n

<button type='button' class='close' onclick='$(this).parent().hide();'>\xc3\x97</button>\n

\n