繁体   English   中英

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

removing a unique div tag when clicked close button

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个程序,当单击一个按钮时会生成一个带有关闭按钮的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();
    });
}
4 个回复

怎么样这个

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

通过调用.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> 

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

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

小提琴

我更喜欢接近

$(function() {
  $(".close").on('click', function () {
    $(this).closest(".imageholder").remove(); // or .hide()
  });
});
1 使用$ emit和$ on单击按钮时显示div标签

我有两个控制器ParentController和ChildController。 我想要实现的是当来自ChildController的按钮被点击以发出事件并在ParentController中监听该事件并且单击按钮以在div标签中显示iframe时。 你可以在下面找到我的代码。 Par ...

2 在div及其按钮之外单击时关闭div

我有一个由按钮控制(显示/隐藏)的div(目标)。 当按钮被触发时,div将显示..那一刻,当我在按钮或div(target)以外的任何地方单击时。 div(target)应该隐藏起来。 我已经尝试过event.stopPropagation(); 但未找到结果 按键 ...

4 单击标签时显示TD内部的div,关闭其他标签

我的TD元素中有锚标签和div,当单击锚标签时,我想将它们显示出来。 另外,我希望其他人单击时关闭,如果已经打开。 HTML: 我尝试使用此JQuery,但由于某种原因,我必须单击两次以使其第一次显示div,如果再单击第二个,则第一个不会关闭。 我不需要添加任何类。 ...

2013-01-25 22:33:18 2 707   jquery
6 Javascript-如何在单击关闭按钮时显示div?

我有一个如下所示的网页: 因此,在单击“ Edit URL按钮后,它将带我到此页面: 所以它按预期工作,我是如何做到的,因为我隐藏了第一页的内容,所以它显示了第二页。正如你所看到的,第二页左上角有一个x ,当点击它时,它将关闭窗口并再次显示第一页。 我猜这是自我解释的。 ...

7 单击.close时删除div

当单击.close链接时,您知道如何删除包含.close链接的div吗? 我正在尝试使用$(this).closest('div').remove()但它不起作用... https://jsfiddle.net/000dqyLd/ ...

2015-12-15 00:41:08 2 56   jquery
8 单击按钮时接头未移除

当您单击删除按钮时,我试图从阵列中删除一个人的全部数据,但是它不起作用。 请帮忙。 var data = [ {name: 'Peter', lastName: 'Petterson', dob: '13/12/1988'}, {name: 'Anna', lastName: ...

10 在div区域外单击时关闭div

我有这段代码。我正在尝试关闭div,当在Div之外点击时,我已经搜索了这个论坛但找不到解决方案 - 这里是一个小提琴 - 演示 ...

2016-03-08 01:29:54 4 224   jquery
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM