Estou com dificuldades para remover inputs selecionados de vários inputs.
Tenho o seguinte código:
$(document).ready(function() {
var btnremoveimg = $('.remover-img');
btnremoveimg.click(function() {
$(this).parent().remove();
});
});
.img {
float: left;
margin-left: 10px;
}
.img img {
border: solid 1px #ccc;
padding: 2px;
}
.img button {
width: 126px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list-inputs">
<input type='hidden' name='upload-img[]' value='http://lorempixel.com/output/abstract-q-c-120-120-6.jpg'>
<input type='hidden' name='upload-img[]' value='http://lorempixel.com/output/abstract-q-c-120-120-4.jpg'>
<input type='hidden' name='upload-img[]' value='http://lorempixel.com/output/abstract-q-c-120-120-6.jpg'>
</div>
<div class='img'>
<div class='conteudo-img'>
<img src="http://lorempixel.com/output/abstract-q-c-120-120-6.jpg">
</div>
<button type='button' class='remover-img'>Remover Imagem</button></div>
</div>
<div class='img'>
<div class='conteudo-img'>
<img src="http://lorempixel.com/output/abstract-q-c-120-120-4.jpg">
</div>
<button type='button' class='remover-img'>Remover Imagem</div>
</div>
<div class='img'>
<div class='conteudo-img'>
<img src="http://lorempixel.com/output/abstract-q-c-120-120-5.jpg">
</div>
<button type='button' class='remover-img'>Remover Imagem</div>
</div>
Eu preciso que ao clicar em .Remover Imagem
eu delete o input com o mesmo valor do src da imagem. Porem estou tendo dificuldades quando a isso.
Alguém conseguiria me ajudar?