Javascript limpar vários inputs ao pressionar um botão com JS

[ferrarez]

Estou com o seguinte problema... tenho 5 "INPUT FILES" criados automaticamente com php os mesmos são criados com IDs diferentes automaticamente, até ai tudo certo.... porém quando pressiono o botão de limpar meu INPUT ele vai limpar todos os INPUTs, mesmo os dados sendo passados corretamente para a function js.

exemplo:

 

input 5 está com foto x

e input 3 esta com foto y

se eu pressionar o botão do input 3 para remover a foto y

ele também removera a foto x do input 5.

Segue abaixo meu código.

desde já grato por qualquer ajuda.

 

 <?php

                    $quantidade = 5;
                    $i = 0;
                    $NumberElements = 1;

                    while($i < $quantidade):

                        echo '<div class="input-fotos">

                            <input type="file" id="img-input-'.$NumberElements.'" class="img-input" name="arquivo[]" accept="image/*" onchange="loadFile(event,\'preview-img-'.$NumberElements.'\',\'img-input-'.$NumberElements.'\',\'p-input-'.$NumberElements.'\',\'img-container-'.$NumberElements.'\',\'action-remove-'.$NumberElements.'\',\'remove-foto-'.$NumberElements.'\')">

                            <p id="p-input-'.$NumberElements.'" class="p-input">Arraste seus arquivos aqui ou clique nesta área.</p>

                            <div class="container-img-action">

                                <div id="img-container-'.$NumberElements.'" class="img-container">
                                    <img id="preview-img-'.$NumberElements.'" class="preview-img" src="">
                                </div>
                                
                                <div id="action-remove-'.$NumberElements.'" class="action-remove">
                                    <button id="remove-foto-'.$NumberElements.'" class="remove-foto" type="submit" name="enviar" onclick="document.getElementById(\'img-input-'.$NumberElements.'\').value = """>Remover</button>
                                </div>

                            </div>

                        </div>';

                    $NumberElements ++;    
                    
                    $i ++;

                    endwhile;
                ?>

 

[lucio_jorge]

Boa tarde,

Tente mudar o type do button, ficando assim: <button type="button"...

[GabrielSennaMs]

@ferrarez 

 

Bom amigo tem um problema no seu código que modifica a propriedade value do input

 

No final tem 3 aspas duplas e ai que tem um problema, ele está fechando no html assim, e dessa maneira ele vai dar erro no script

onclick="document.getElementById(\'img-input-'.$NumberElements.'\').value = "

 

 

Você pode troca o valor por null ou aspas simples com barra.

onclick="document.getElementById(\'img-input-'.$NumberElements.'\').value = \'\'"

ou

onclick="document.getElementById(\'img-input-'.$NumberElements.'\').value = null"

 

 

  Em 05/01/2021 às 16:39, ferrarez disse:

se eu pressionar o botão do input 3 para remover a foto y

ele também removera a foto x do input 5.

Expandir  

 

Não tem nada que execute tal ação no seu script.

 

Um chute, pode ser porque o botão de remover imagem é do tipo submit, dessa maneira se você clickar nele ele vai fazer uma request e carregando a mesma página, assim dando a impressão de que ele removeu todos os valores dos inputs.