40

我为输入的 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

4

8 回答 8

66

最简单的方法（假设您要删除元素）

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

像这样的东西。

于 2013-10-31T11:02:21.853 回答
11

使用 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>
于 2013-10-31T10:55:54.640 回答
5

你可以使用这个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(); 
    });
});
于 2013-10-31T11:02:53.793 回答
4

这是更新的FIDDLE

您的HTML应该如下所示（我只添加了按钮）：

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

您应该添加以下CSS：

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

然后，要使按钮真正起作用，您应该添加以下 javascript：

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

我们在e.preventDefault()这里使用是为了防止锚点跟随链接。

于 2013-10-31T11:03:00.280 回答
4

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

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

或“只是”隐藏它：

<button type='button' class='close' onclick='$(this).parent().hide();'>×</button>
于 2016-07-01T23:04:45.163 回答
1

更新了你的小提琴： http: //jsfiddle.net/xftr5/11/ 希望，一切都清楚了吗？

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

添加了 jQuery 并插入了一个<i>关闭触发器...

于 2013-10-31T10:59:30.543 回答
1

jQuery("#your_div_id").remove(); 将从 HTML DOM 中完全删除相应的元素。因此，如果您想在不刷新的情况下在另一个事件上显示 div，除非您使用 AJAX，否则将无法取回已删除的元素。

jQuery("#your_div_id").toggle("slow"); will也可能产生意想不到的结果。例如，当您在 div 上选择某个元素时，该元素会生成另一个带有关闭按钮的 div（它使用与之前的 div 相同的关闭功能），它可能会产生不良行为。

所以在不使用 AJAX 的情况下，关闭按钮的一个好的解决方案如下

HTML____________

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

查询__________

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

现在您可以显示 div，当您希望发生另一个事件时... :-)

于 2016-01-22T09:45:57.923 回答
0

这是我的做法。目标是创建一个按钮（点击让我们说另一个按钮/实体），并为其添加删除机制。我将以下脚本添加到 javascript 文件中-

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

这对我有用。我意识到上标可以用更多的代码代替，这可能会给它更多的内容，但这里的目标是给它一个 X 来点击。

于 2021-03-18T23:58:02.137 回答