单击关闭按钮时删除唯一的div标签

Question

我有一个程序，当单击一个按钮时会生成一个带有关闭按钮的div。 我以某种方式解决了如何在单击单击按钮时关闭div，但问题是，当我一次生成多个div并单击其中的任何关闭按钮时，它将删除所有div。

我还管理了这个JSFiddle进行演示。

注意：我没有添加按钮来生成div的代码，相反，我在JSFiddle中创建了3个虚拟div，只是为了演示我想要的。

HTML：

<div class="imageholder"> <span class='close'>x</span>

    <figure>
        <img src="${filePath}" alt="${fileName}" />
        <figcaption>${fileName}
            <br/>   <span>Original Size: ${fileOriSize} KB</span>
            <br/>   <span>Upload Size: ${fileUploadSize} KB</span>

        </figcaption>
    </figure>
</div>
<div class="imageholder"> <span class='close'>x</span>

    <figure>
        <img src="${filePath}" alt="${fileName}" />
        <figcaption>${fileName}
            <br/>   <span>Original Size: ${fileOriSize} KB</span>
            <br/>   <span>Upload Size: ${fileUploadSize} KB</span>

        </figcaption>
    </figure>
</div>
<div class="imageholder"> <span class='close'>x</span>

    <figure>
        <img src="${filePath}" alt="${fileName}" />
        <figcaption>${fileName}
            <br/>   <span>Original Size: ${fileOriSize} KB</span>
            <br/>   <span>Upload Size: ${fileUploadSize} KB</span>

        </figcaption>
    </figure>
</div>

CSS：

.imageholder {
    display:inline-block;
    background:#fff;
    padding:10px;
    margin:7px;
    text-align:center;
    box-shadow:0 0 4px #999;
    border:1px solid #999;
    position:relative;
}
.imageholder figcaption {
    font-style:italic;
    width:120px;
    word-wrap:break-word;
    font-weight:bold;
}
.imageholder figcaption span {
    font-size:11px;
    color:#777;
}
.imageholder img {
    width:120px;
    height:120px;
}
.imageholder .close {
    margin-left: 30px;
    margin-top: -22px;
    width: 20px;
    height: 20px;
    background-color: #ddd;
    font-size: 18px;
    opacity: .99;
    border-radius: 10px;
}

JS：

closeBtn = $('.close');
imageHolder = $('.imageholder');
closeOnClick();

function closeOnClick() {
    closeBtn.on('click', function () {
        $(imageHolder).remove();
    });
}

Answer 1

怎么样这个 ：

function closeOnClick() {
    closeBtn.on('click', function () {
        $(this).parent().remove();// Close the div that contains the button clicked.
    });
}

Answer 2

通过调用.parent（imageHolder）.remove（）关闭所需的父div。

 closeBtn = $('.close'); imageHolder = $('.imageholder'); closeOnClick(); function closeOnClick() { closeBtn.on('click', function () { $(this).parent('.imageholder').remove(); }); } 

 .imageholder { display:inline-block; background:#fff; padding:10px; margin:7px; text-align:center; box-shadow:0 0 4px #999; border:1px solid #999; position:relative; } .imageholder figcaption { font-style:italic; width:120px; word-wrap:break-word; font-weight:bold; } .imageholder figcaption span { font-size:11px; color:#777; } .imageholder img { width:120px; height:120px; } .imageholder .close { margin-left: 30px; margin-top: -22px; width: 20px; height: 20px; background-color: #ddd; font-size: 18px; opacity: .99; border-radius: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imageholder"> <span class='close'>x</span> <figure> <img src="${filePath}" alt="${fileName}" /> <figcaption>${fileName} <br/> <span>Original Size: ${fileOriSize} KB</span> <br/> <span>Upload Size: ${fileUploadSize} KB</span> </figcaption> </figure> </div> <div class="imageholder"> <span class='close'>x</span> <figure> <img src="${filePath}" alt="${fileName}" /> <figcaption>${fileName} <br/> <span>Original Size: ${fileOriSize} KB</span> <br/> <span>Upload Size: ${fileUploadSize} KB</span> </figcaption> </figure> </div> <div class="imageholder"> <span class='close'>x</span> <figure> <img src="${filePath}" alt="${fileName}" /> <figcaption>${fileName} <br/> <span>Original Size: ${fileOriSize} KB</span> <br/> <span>Upload Size: ${fileUploadSize} KB</span> </figcaption> </figure> </div> 

Answer 3

如果使用$(this)引用父元素，那么您将获得所需的效果。 因此，代码略有更改为：

function closeOnClick() {
    closeBtn.on('click', function () {
        $(this).parent().remove();
    });
}

小提琴

Answer 4

我更喜欢接近 ：

$(function() {
  $(".close").on('click', function () {
    $(this).closest(".imageholder").remove(); // or .hide()
  });
});