Question

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

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

这是我的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>

代码位于php

内

Answer 1

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

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

在div内添加example here。

你也可以使用这样的东西

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

An Example Here.

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

类似于this one。

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

以下是更新的 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()来阻止锚点跟踪链接。

Answer 4

您可以使用此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 5

jQuery解决方案：在您想要关闭的任何元素中添加此按钮：

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

或'只是'隐藏它：

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

Answer 6

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

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

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

Answer 7

的jQuery（＆＃34;＃your_div_id＆＃34）除去（）;将完全删除HTML DOM中的相应元素。因此，如果您想在没有刷新的情况下在另一个事件上显示div，除非您使用AJAX，否则将无法检索已删除的元素。

的jQuery（＆＃34;＃your_div_id＆＃34）。切换（＆＃34;慢＆＃34）;也会产生意想不到的结果。作为一个例子，当您在div上选择一个元素生成另一个带有关闭按钮的div时（它使用与前一个div相同的关闭功能），它可能会产生不良行为。

因此，如果不使用AJAX，关闭按钮的一个很好的解决方案如下

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

现在你可以显示div，当你想要的另一个事件发生时......： - ）

Answer 8

这是我如何做到的。目标是创建一个按钮（点击时可以说是另一个按钮/实体），并为其添加删除机制。我将以下脚本添加到 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 以供点击。

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

8 个答案: