removing a unique div tag when clicked close button

Question

I have a program which generates a div with a close button when a button is clicked. I somehow tackled, how to close the div when the click button is clicked, but the problem is when the i generate more than one div's at a time and click any of there close buttons it removes all the divs.

I've also managed this JSFiddle for demonstration.

Note: I haven't added button to generate the code for div, instead i have created 3 dummy divs in my JSFiddle just to demonstrate what i want.

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

How about this :

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

Answer 2

Close the parent div you want by calling .parent(imageHolder).remove().

 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

If you refer to the parent element with $(this) , then you get the desired effect. So the code is slightly changed to:

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

Fiddle

Answer 4

I prefer closest :

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