Question

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

我还管理this 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

this：

怎么样？

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您使用$(this)引用父元素，那么您将获得所需的效果。所以代码稍微改为：

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

Fiddle

Answer 4

我更喜欢closest：

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

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

4 个答案: