blocks|key|407111|text|使用div容器的id很容易：(我没有在<a>中放置关闭按钮，因为它在所有浏览器上都正常工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|407112|<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>|code-block|syntax|javascript|407113|entityMap^0|J|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>it's easy with the id of the div container : (I didn't put the close button inside the <code>&lt;a&gt;</code> because that's does work properly on all browser.</p>

<pre><code>&lt;div id="myDiv"&gt;
&lt;button class="close" onclick="document.getElementById('myDiv').style.display='none'" &gt;Close&lt;/button&gt;
&lt;a class="fragment" href="http://google.com"&gt;
    &lt;div&gt;
    &lt;img src ="http://placehold.it/116x116" alt="some description"/&gt; 
    &lt;h3&gt;the title will go here&lt;/h3&gt;
        &lt;h4&gt; www.myurlwill.com &lt;/h4&gt;
    &lt;p class="text"&gt;
        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 
    &lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1661136|text|更新你的小提琴：http://jsfiddle.net/xftr5/11/希望，一切都清楚吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1661137|$(document).ready(function()+{
++++$('.fragment+i').on('click',+function(e)+{+$(e.target).closest('a').remove();+});
});|code-block|syntax|javascript|1661138|添加jQuery并插入<i>作为关闭触发器..。|style|CODE|1661139|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/xftr5/11/^0|8|T|0|0|0|B|3|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$A|10|B|11|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Updated your fiddle: <a href="http://jsfiddle.net/xftr5/11/" rel="nofollow">http://jsfiddle.net/xftr5/11/</a>
Hope, everything is clear?</p>

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

<p>Added jQuery and inserted an <code>&lt;i&gt;</code> as close trigger...</p>


blocks|key|1661196|text|一个简单的关闭按钮：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1661197|<span+id="close"+onclick="this.parentNode.parentNode.remove();+return+false;">x</span>|code-block|syntax|javascript|1661198|将此添加到div中|offset|length|style|CODE|1661199|​|1661200|.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;
}|1661201|<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>|1661202|1661203|你也可以使用这样的东西|1661204|window.onload+=+function(){
++++document.getElementById('close').onclick+=+function(){
++++++++this.parentNode.parentNode.remove();
++++++++return+false;
++++};
};|1661205|1661206|window.onload+=+function(){
++++document.getElementById('close').onclick+=+()+=>+{
++++++++this.parentNode.parentNode.remove();
++++++++return+false;
++++};
};|1661207|.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;
}|1661208|<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>|1661209|1661210|样式设置|1661211|关闭按钮的Css|1661212|#close+{
++++float:right;
++++display:inline-block;
++++padding:2px+5px;
++++background:#ccc;
}|1661213|您可以添加一个悬停效果，如|1661214|#close:hover+{
++++float:right;
++++display:inline-block;
++++padding:2px+5px;
++++background:#ccc;
++++color:#fff;
}|1661215|1661216|window.onload+=+function(){
++++document.getElementById('close').onclick+=+function(){
++++++++this.parentNode.parentNode.remove();
++++++++return+false;
++++};
};|1661217|.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;
}|1661218|<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>|1661219|1661220|entityMap^0|0|0|5|3|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1R|8|@$I|1S|J|1T|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1U|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|1V|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|D|7|1W|8|@]|9|@]|A|$E|F]]|$1|S|3|N|5|6|7|1X|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|V|3|W|5|D|7|1Z|8|@]|9|@]|A|$E|F]]|$1|X|3|N|5|6|7|20|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|21|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|D|7|22|8|@]|9|@]|A|$E|F]]|$1|12|3|13|5|D|7|23|8|@]|9|@]|A|$E|F]]|$1|14|3|N|5|6|7|24|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|25|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|26|8|@]|9|@]|A|$]]|$1|19|3|1A|5|D|7|27|8|@]|9|@]|A|$E|F]]|$1|1B|3|1C|5|6|7|28|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|D|7|29|8|@]|9|@]|A|$E|F]]|$1|1F|3|N|5|6|7|2A|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|D|7|2B|8|@]|9|@]|A|$E|F]]|$1|1I|3|1J|5|D|7|2C|8|@]|9|@]|A|$E|F]]|$1|1K|3|1L|5|D|7|2D|8|@]|9|@]|A|$E|F]]|$1|1M|3|N|5|6|7|2E|8|@]|9|@]|A|$]]|$1|1N|3|-4|5|6|7|2F|8|@]|9|@]|A|$]]]|1O|$]]

<p>A simple close button:</p>
<pre class="lang-html prettyprint-override"><code>&lt;span id=&quot;close&quot; onclick=&quot;this.parentNode.parentNode.remove(); return false;&quot;&gt;x&lt;/span&gt;
</code></pre>
<p>Add this inside your <code>div</code>:</p>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;br /&gt;&lt;br /&gt;
&lt;a class="fragment" href="google.com"&gt;
    &lt;div&gt;
        &lt;span id='close' onclick='this.parentNode.parentNode.remove(); return false;'&gt;x&lt;/span&gt;
        &lt;img src ="http://placehold.it/116x116" alt="some description"/&gt; 
        &lt;h3&gt;the title will go here&lt;/h3&gt;
        &lt;h4&gt; www.myurlwill.com &lt;/h4&gt;
        &lt;p class="text"&gt;
            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 
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/a&gt;</code></pre>
</div>
</div>
</p>
<p>You may also use something like this</p>
<pre><code>window.onload = function(){
    document.getElementById('close').onclick = function(){
        this.parentNode.parentNode.remove();
        return false;
    };
};
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function(){
    document.getElementById('close').onclick = () =&gt; {
        this.parentNode.parentNode.remove();
        return false;
    };
};</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;br /&gt;&lt;br /&gt;
&lt;a class="fragment" href="google.com"&gt;
    &lt;div&gt;
        &lt;span id='close'&gt;x&lt;/span&gt;
        &lt;img src ="http://placehold.it/116x116" alt="some description"/&gt; 
        &lt;h3&gt;the title will go here&lt;/h3&gt;
        &lt;h4&gt; www.myurlwill.com &lt;/h4&gt;
        &lt;p class="text"&gt;
            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 
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/a&gt;</code></pre>
</div>
</div>
</p>
<h2>Styling</h2>
<p>Css for close button</p>
<pre><code>#close {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
}
</code></pre>
<p>You may add a hover effect like</p>
<pre><code>#close:hover {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
    color:#fff;
}
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function(){
    document.getElementById('close').onclick = function(){
        this.parentNode.parentNode.remove();
        return false;
    };
};</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;br /&gt;&lt;br /&gt;
&lt;a class="fragment" href="google.com"&gt;
    &lt;div&gt;
        &lt;span id='close'&gt;x&lt;/span&gt;
        &lt;img src ="http://placehold.it/116x116" alt="some description"/&gt; 
        &lt;h3&gt;the title will go here&lt;/h3&gt;
        &lt;h4&gt; www.myurlwill.com &lt;/h4&gt;
        &lt;p class="text"&gt;
            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 
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1661227|text|您可以使用这个jsFiddle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1661228|和|1661229|<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>|code-block|syntax|javascript|1661230|使用JS+(jquery+)|style|BOLD|1661231|$(document).ready(function()+{
++++$('#closeButton').on('click',+function(e)+{+
++++++++$('#previewBox').remove();+
++++});
});|1661232|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/xftr5/12/^0|7|8|0|0|0|0|2|C|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|14|8|@$A|15|B|16|M|N]]|9|@]|C|$]]|$1|O|3|P|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>You can use this <a href="http://jsfiddle.net/xftr5/12/" rel="noreferrer">jsFiddle</a></p>

<p>And <strong>HTML</strong>:</p>

<pre><code>&lt;div id="previewBox"&gt;
    &lt;button id="closeButton"&gt;Close&lt;/button&gt;
&lt;a class="fragment" href="google.com"&gt;
    &lt;div&gt;
    &lt;img src ="http://placehold.it/116x116" alt="some description"/&gt; 
    &lt;h3&gt;the title will go here&lt;/h3&gt;
        &lt;h4&gt; www.myurlwill.com &lt;/h4&gt;
    &lt;p class="text"&gt;
        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 
    &lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>With <strong>JS (jquery required)</strong>:</p>

<pre><code>$(document).ready(function() {
    $('#closeButton').on('click', function(e) { 
        $('#previewBox').remove(); 
    });
});
</code></pre>


blocks|key|2737989|text|以下是更新的小提琴|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2737990|您的应该如下所示(我只添加了按钮)：|2737991|<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>|code-block|syntax|javascript|2737992|您应该添加以下CSS|style|BOLD|2737993|.fragment+{
++++position:+relative;
}
#closeButton+{
++++position:+absolute;
++++top:+0;
++++right:+0;
}|2737994|然后，要使按钮实际工作，您应该添加以下javascript：|2737995|document.getElementById('closeButton').addEventListener('click',+function(e)+{
++++e.preventDefault();
++++this.parentNode.style.display+=+'none';
},+false);|2737996|我们在这里使用e.preventDefault()来防止锚点跟踪链接。|CODE|2737997|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/xftr5/15/^0|6|3|0|0|0|0|7|3|0|0|0|0|7|I|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@$A|16|B|17|1|18]]|C|$]]|$1|D|3|E|5|6|7|19|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1B|8|@$A|1C|B|1D|M|N]]|9|@]|C|$]]|$1|O|3|P|5|H|7|1E|8|@]|9|@]|C|$I|J]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@]|C|$]]|$1|S|3|T|5|H|7|1G|8|@]|9|@]|C|$I|J]]|$1|U|3|V|5|6|7|1H|8|@$A|1I|B|1J|M|W]]|9|@]|C|$]]|$1|X|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]]|Y|$Z|$5|10|11|12|C|$13|14]]]]

<p>Here's the updated <strong><a href="http://jsfiddle.net/xftr5/15/" rel="nofollow">FIDDLE</a></strong></p>

<p>Your <strong>HTML</strong> should look like this (I only added the button):</p>

<pre><code>&lt;a class="fragment" href="google.com"&gt;
    &lt;button id="closeButton"&gt;close&lt;/button&gt;
    &lt;div&gt;
        &lt;img src ="http://placehold.it/116x116" alt="some description"/&gt; 
        &lt;h3&gt;the title will go here&lt;/h3&gt;
        &lt;h4&gt; www.myurlwill.com &lt;/h4&gt;
        &lt;p class="text"&gt;
        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 
        &lt;/p&gt;
    &lt;/div&gt;
&lt;/a&gt;
</code></pre>

<p>and you should add the following <strong>CSS</strong>:</p>

<pre><code>.fragment {
    position: relative;
}
#closeButton {
    position: absolute;
    top: 0;
    right: 0;
}
</code></pre>

<p>Then, to make the button actually work, you should add this javascript:</p>

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

<p>We're using <code>e.preventDefault()</code> here to prevent the anchor from following the link.</p>


blocks|key|407177|text|jQuery("#your_div_id").remove()；将从HTML中完全删除相应的元素。因此，如果您想在不刷新的情况下在另一个事件上显示div，那么除非使用AJAX，否则不可能返回已删除的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|407178|jQuery("#your_div_id").toggle("slow")；也会产生意想不到的结果。例如，当您在div上选择某个元素时，它会产生另一个div，其中有一个关闭按钮(它使用的关闭功能与以前的div相同)，它可能会产生不想要的行为。|407179|因此，如果不使用AJAX，关闭按钮的一个很好的解决方案如下|407180|HTML____________|407181|<div+id="your_div_id">
<span+class="close_div"+onclick="close_div(1)">&#10006</span>
</div>|code-block|syntax|javascript|407182|JQUERY__________|407183|function+close_div(id)+{
++++if(id+===+1)+{
++++++++jQuery("#your_div_id").hide();
++++}
}|407184|现在您可以显示div，当另一个事件按您的意愿发生时.:-)|407185|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>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.</p>

<p>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.</p>

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

<p>HTML____________</p>

<pre><code>&lt;div id="your_div_id"&gt;
&lt;span class="close_div" onclick="close_div(1)"&gt;&amp;#10006&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>JQUERY__________</p>

<pre><code>function close_div(id) {
    if(id === 1) {
        jQuery("#your_div_id").hide();
    }
}
</code></pre>

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


blocks|key|2738064|text|jQuery解决方案:在您希望关闭的任何元素中添加此按钮：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2738065|<button+type='button'+class='close'+onclick='$(this).parent().remove();'>×</button>|code-block|syntax|javascript|2738066|或者把它藏起来：|2738067|<button+type='button'+class='close'+onclick='$(this).parent().hide();'>×</button>|2738068|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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

<pre><code>&lt;button type='button' class='close' onclick='$(this).parent().remove();'&gt;×&lt;/button&gt;
</code></pre>

<p>or to 'just' hide it:</p>

<pre><code>&lt;button type='button' class='close' onclick='$(this).parent().hide();'&gt;×&lt;/button&gt;
</code></pre>


blocks|key|1661351|text|我就是这么做的。目标是创建一个按钮(单击让我们说另一个按钮/实体)，并向其添加一个删除机制。我在javascript文件中添加了以下脚本-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1661352|++++++++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);|code-block|syntax|javascript|1661353|这对我有用。我意识到这个上标可以用更多的代码来代替，这也许会给它更多的内容，但是这里的目标是给它一个X来点击。|1661354|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>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-</p>
<pre><code>        let newbtn = document.createElement(&quot;button&quot;);
        newbtn.innerHTML = 'whatever text you want the button to have';


       // the remove button
       let xspan = document.createElement('span');
       xspan.innerHTML = '&lt;sup&gt;X&lt;/sup&gt;'; //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);
</code></pre>
<p>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.</p>


<p>I have created a URL preview box for the entered URL.</p>
<p>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?</p>
<p>Here is my <a href="http://jsfiddle.net/karimkhan/xftr5/" rel="noreferrer">fiddle</a>.</p>
<pre><code>&lt;a class=&quot;fragment&quot; href=&quot;google.com&quot;&gt;
    &lt;div&gt;
    &lt;img src =&quot;http://placehold.it/116x116&quot; alt=&quot;some description&quot;/&gt; 
    &lt;h3&gt;the title will go here&lt;/h3&gt;
        &lt;h4&gt; www.myurlwill.com &lt;/h4&gt;
    &lt;p class=&quot;text&quot;&gt;
        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 
    &lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;
</code></pre>
<p><strong>code</strong> is inside <code>php</code></p>


Adding close button in div to close the box

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我已经为输入的URL创建了URL预览框。预览显示在div框中。我想在右边的顶部加上一个关闭选项。如何才能使用户单击其框时被禁用？这是我的。<a class="fragment" href="google.com">    <div>    <img src ="http://placehold.it/116x116" ...

问在div中添加“关闭”按钮以关闭该框。
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在div中添加“关闭”按钮以关闭该框。EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在div中添加“关闭”按钮以关闭该框。
EN