Delete selected input from an array with jquery condition

Question

I’m having trouble removing selected inputs from various inputs.

I have the following code:

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

I need you to click on .Remover Imagem i delete the input with the same src value as the image. However, I am having difficulties when.

Someone could help me?

Answer 1

I haven’t tested it, but see if it works that way, only you have to keep the file name different:

$(document).ready(function() {
  var btnremoveimg = $('.remover-img');
  btnremoveimg.click(function() {
    $(this).parent().remove();
    var valor = $(this).parent().find('img').attr('src');
     $('#list-inputs input').each(function() {
       if ($(this).val() == valor) {
           $(this).remove();    
       }

     });
  });

});

I suggest doing by ID, type in HTML you put the ID in input:

 <div id="list-inputs">
      <input type='hidden' id="img_1" name='upload-img[]' value='http://lorempixel.com/output/abstract-q-c-120-120-6.jpg'>
      <input type='hidden' id="img_2" name='upload-img[]' value='http://lorempixel.com/output/abstract-q-c-120-120-4.jpg'>
      <input type='hidden' id="img_3" name='upload-img[]' value='http://lorempixel.com/output/abstract-q-c-120-120-6.jpg'>
    </div>

<div id="elm_1" 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 id="elm_2" 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 id="elm_3" 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>

And in the script, take the id:

 $(document).ready(function() {
          var btnremoveimg = $('.remover-img');
          btnremoveimg.click(function() {
          var pai = $(this).parent();
              pai.remove();
          var inputObj = pai.attr('id').replace('elm_','img_');
              $(inputObj).remove();    
             });
          });
      });

Answer 2

you only need to search for input:hidden with value equal to source of img within the div.img that contain the button.remover-img clickado:

var source = document.getElementById("tmpl").innerHTML;
var template = Handlebars.compile(source);
var context = {
  imagens: [
    "http://lorempixel.com/output/abstract-q-c-120-120-1.jpg",
    "http://lorempixel.com/output/abstract-q-c-120-120-2.jpg",
    "http://lorempixel.com/output/abstract-q-c-120-120-3.jpg",
    "http://lorempixel.com/output/abstract-q-c-120-120-4.jpg",
    "http://lorempixel.com/output/abstract-q-c-120-120-5.jpg",
    "http://lorempixel.com/output/abstract-q-c-120-120-6.jpg"
  ]
}
document.body.innerHTML = template(context);

var listInputs = document.getElementById("list-inputs");
var buttons = document.querySelectorAll(".remover-img");
buttons = [].slice.apply(buttons);

var onRemoverImgClick = function () {
  var button = this;
  var container = button.parentNode;
  var imagem = button.parentNode.getElementsByTagName("img")[0];
  var hidden = listInputs.querySelector("[value='" + imagem.src + "']");

  container.parentNode.removeChild(container);
  listInputs.removeChild(hidden);
}

buttons.forEach(function (button) {
  button.addEventListener("click", onRemoverImgClick)
});

.img {
  float: left;
  margin-left: 10px;
}
.img img {
  border: solid 1px #ccc;
  padding: 2px;
}
.img button {
  width: 126px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
<script id="tmpl" type="text/template">
  <div id="list-inputs">
    {{#each imagens}}
    <input type='hidden' name='upload-img[]' value='{{this}}' />
    {{/each}}
  </div>
  {{#each imagens}}
  <div class='img'>
    <div class='conteudo-img'>
      <img src="{{this}}" />
    </div>
    <button type='button' class='remover-img'>Remover Imagem</button>
  </div>
  {{/each}}
</script>