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

Question

我为输入的 URL 创建了一个 URL 预览框。

预览显示在 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

原文由 user123 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个简单的关闭按钮：

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

将此添加到您的 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>

你也可以使用这样的东西

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>

造型

关闭按钮的 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;
}

 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>

原文由 The Alpha 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Asenar 发布，翻译遵循 CC BY-SA 3.0 许可协议