Hinzufügen schließen Knopf in Div, um die Box zu schließen

Question

Ich habe URL-Vorschau-Box für eingegebene URL erstellt.

Die Vorschau wird in der Div-Box angezeigt. Ich möchte schließen Option rechts oben. Wie könnte getan werden, so dass wenn Benutzer darauf klicken sollte deaktiviert sein.

Hier ist meine 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> 

Code ist innerhalb php

Answer 1

einfachste Weise (angenommen Sie das Element entfernen möchten)

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

Fügen Sie diese in Ihrem div, eine example here.

Sie können auch so etwas wie dieses

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

An Example Here.

Css für Schließen-Schaltfläche

#close { 
    float:right; 
    display:inline-block; 
    padding:2px 5px; 
    background:#ccc; 
} 

verwenden Sie einen Hover-Effekt hinzufügen kann wie

#close:hover { 
    float:right; 
    display:inline-block; 
    padding:2px 5px; 
    background:#ccc; 
    color:#fff; 
} 

Etwas wie this one.

Answer 2

ist es einfach, mit der ID des div Container: (I nicht die Schließen-Schaltfläche in der <a> gelegt hat, denn das ist richtig auf allen Browser funktioniert

.

<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

Aktualisiert Ihre Geige: http://jsfiddle.net/xftr5/11/ Hoffnung, alles klar ist

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

Added jQuery und ein <i> so nah Trigger eingefügt ...

Answer 4

können Sie verwenden diese jsFiddle

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

Mit JS (jquery erforderlich):

$(document).ready(function() { 
    $('#closeButton').on('click', function(e) { 
     $('#previewBox').remove(); 
    }); 
}); 

Answer 5

Hier ist die aktualisierte FIDDLE

Ihre HTML sollte wie folgt aussehen (Ich habe nur die Taste):

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

und Sie sollten die folgenden CSS hinzufügen:

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

Dann machen Sie die Taste tatsächlich arbeiten, sollten Sie dieses Javascript hinzufügen:

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

Wir verwenden hier e.preventDefault(), um zu verhindern, dass der Anker dem Link folgt.

Answer 6

jQuery ("# ​​Ihre_Div_ID"). Remove(); Entfernt die entsprechenden Elemente vollständig aus dem HTML-DOM. Wenn Sie das div also bei einem anderen Ereignis ohne Aktualisierung anzeigen möchten, können die entfernten Elemente nicht wiederhergestellt werden, es sei denn, Sie verwenden AJAX.

jQuery ("# ​​your_div_id"). Toggle ("langsam"); kann auch zu unerwarteten Ergebnissen führen. Als ein Beispiel, wenn Sie ein Element in Ihrem div auswählen, das ein anderes div mit einer Schließen-Schaltfläche erzeugt (die dieselbe Close-Funktionalität wie Ihr vorheriges div verwendet), könnte dies zu unerwünschtem Verhalten führen.

Also ohne AJAX verwenden, um eine gute Lösung für die Schließen-Schaltfläche sein würde, wie

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

Nun folgt können Sie die div zeigen, wenn ein anderes Ereignis geschieht wie du willst ... :-)

Answer 7

A jQuery Lösung: Fügen Sie diese Taste innerhalb jedes Element, das Sie in der Nähe der Lage sein wollen:

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

oder 'nur' verstecken:

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