Quiero borrar el valor de todas las entradas archivadas que tengan class class="axs" dentro de un DIV dado con un botón. Estoy usando este código JavaScript:
Usando JavaScript vainilla puro, cómo eliminar el atributo de valor como value= ''
let content = document.getElementById("output").innerHTML; let el = document.createElement('div'); el.innerHTML = content; let textS = el.querySelectorAll(".axs"); for (let i = 0; i < textS.length; i++) { let id = textS[i].id; el.getElementById(id).value = ''; } <div id="output"> <div> <input class="axs" id="1" type="text" value="1650" spellcheck="false"> <input class="axs" id="2" type="text" value="850" spellcheck="false"> <input class="axs" id="3" type="text" value="340" spellcheck="false"> <input class="axs" id="4" type="text" value="321" spellcheck="false"> <input class="axs" id="5" type="text" value="567" spellcheck="false"> <input class="axs" id="6" type="text" value="890" spellcheck="false"> </div> </div>Probar esto:
document.querySelectorAll(".axs").forEach(x => x.value = ''); Primero, el método querySelectorAll hace coincidir todos los elementos con el nombre de clase .axs y los coloca en una matriz. Luego uso el método forEach para hacer un bucle de cada elemento, al que llamo x y luego establezco el valor de x para que quede vacío para cada uno.
Aquí una versión ajustada de su guión.
let textS = document.querySelectorAll(".axs"); for (let i = 0; i < textS.length; i++) { textS[i].value = ''; } <div id="output"> <div> <input class="axs" id="1" type="text" value="1650" spellcheck="false"> <input class="axs" id="2" type="text" value="850" spellcheck="false"> <input class="axs" id="3" type="text" value="340" spellcheck="false"> <input class="axs" id="4" type="text" value="321" spellcheck="false"> <input class="axs" id="5" type="text" value="567" spellcheck="false"> <input class="axs" id="6" type="text" value="890" spellcheck="false"> </div> </div>parece que está confundiendo el valor del atributo vinculado a una entrada y el valor actual de una entrada.
formalmente debe utilizar un reset y un formulario reemplazar todos los valores de las entradas por los fijados en su atributo
Ejemplo 1:
const myForm = document.forms['my-form'] , All_Inputs = myForm.querySelectorAll('input') myForm.clearBt.onclick = () => { All_Inputs.forEach(el=> el.value='') } <form name="my-form"> <input name="axs1" type="text" value="1650" placeholder="axs1"> <input name="axs2" type="text" value="232" placeholder="axs2"> <input name="axs3" type="text" value="789" placeholder="axs3"> <button type="reset"> real form reset</button> <button type="button" name="clearBt"> just clear inputs</button> </form> <p> the clear button doesn't change the input attribute, <br> and the default values goes back whith the reset button. </p>ejemplo 2:
const myForm = document.forms['my-form'] , All_Inputs = myForm.querySelectorAll('input') myForm.clearBt.onclick = () => { All_Inputs.forEach(el=>el.setAttribute('value','')) } <form name="my-form"> <input name="axs1" type="text" value="1650" placeholder="axs1"> <input name="axs2" type="text" value="4898" placeholder="axs2"> <input name="axs3" type="text" value="12" placeholder="axs3"> <button type="reset"> real form reset</button> <button type="button" name="clearBt"> clear inputs attributes</button> </form> <p> the clear button change the input attribute, <br> and the default values will be definitely changed for the reset button. </p>Entonces, para tu pregunta:
document .querySelectorAll('input.axs') .forEach(el=> el.setAttribute('value','')) console.log( document.querySelector('div').innerHTML )<div id="output"> <div> <input class="axs" id="1" type="text" value="1650" spellcheck="false"> <input class="axs" id="2" type="text" value="850" spellcheck="false"> <input class="axs" id="3" type="text" value="340" spellcheck="false"> <input class="axs" id="4" type="text" value="321" spellcheck="false"> <input class="axs" id="5" type="text" value="567" spellcheck="false"> <input class="axs" id="6" type="text" value="890" spellcheck="false"> </div> </div>