在div中添加關閉按鈕以關閉框

Question

我已經爲輸入的url創建了url預覽框。

預覽顯示在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

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

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

加入jQuery和插入的<i>接近觸發...

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

下面是更新​​

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

jQuery（「＃your_div_id」）。remove（）;將從HTML DOM中完全刪除相應的元素。因此，如果您想在不刷新的情況下在另一個事件上顯示div，除非使用AJAX，否則將無法檢索刪除的元素。

jQuery（「＃your_div_id」）。toggle（「slow」）;也會造成意想不到的結果。作爲一個例子，當你選擇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 7

這個jQuery的解決方案：添加此按鈕，您希望能夠關閉所有的元素：

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

，或者「只是」隱藏：

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