web-dev-qa-db-ja.com

divに閉じるボタンを追加してボックスを閉じる

入力した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>

codeはphpの中にあります

javascriptphphtml
29
user123

最も簡単な方法（要素を削除すると仮定）

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

this one のようなもの。

54
The Alpha

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

更新された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()を使用しています。

4
matewka

これを使用できます 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>

WithJS（jquery required）：

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

JQueryソリューション：閉じたい要素内にこのボタンを追加します。

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

または「ちょうど」非表示にする：

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

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を表示できます... :-)

1
Nimantha Harshana Perera

あなたのフィドルを更新しました： http://jsfiddle.net/xftr5/11/ 希望、すべてが明確ですか

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

JQueryを追加し、<i>をクローズトリガーとして挿入しました...

1
pebbo