刪除一個獨特的div標籤點擊關閉按鈕

我有一個程序，當點擊一個按鈕時，用關閉按鈕生成一個div。我以某種方式解決了如何在單擊按鈕時關閉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(); 
    }); 
}

來源

2015-01-14 Subhan Ahmed

務必發佈您的代碼在你的問題。 – j08691

最好是[MCVE]（http://stackoverflow.com/help/mcve） – Braiam

對不起，我無法給我的JSFIDDLE由於一些錯誤的網址。 –

如何this：

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

來源

2015-01-14 20:30:30 acontell

是的，也有人工作。非常感謝：D –

@SubhanAhmed不客氣:)接受請，如果它解決了你的問題。 – acontell

關閉致電.parent（imageHolder的）希望父DIV一個.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/> \t <span>Original Size: ${fileOriSize} KB</span> 
 
      <br/> \t <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/> \t <span>Original Size: ${fileOriSize} KB</span> 
 
      <br/> \t <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/> \t <span>Original Size: ${fileOriSize} KB</span> 
 
      <br/> \t <span>Upload Size: ${fileUploadSize} KB</span> 
 

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

來源

2015-01-14 20:30:06 Red2678

如果你指的是父元素與$(this)，那麼你得到想要的效果。因此，代碼稍有更改爲：

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

Fiddle

來源

2015-01-14 20:34:38 jyrkim

我喜歡closest：

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

來源

2015-01-14 20:39:08 mplungjan

刪除一個獨特的div標籤點擊關閉按鈕

回答

相關問題