Estoy tratando de borrar ciertos campos en mi formulario.
He usado el siguiente código jQuery, pero no me funcionan:
mi html
<section id="clear-section" class="clear-section"> <a id="clear-link" href="javascript:void(0)">Clear</a> </section>Código jQuery 1
let clearLink = $("#clear-link"); clearLink.on("click", function () { $("#calc-form-section-1") .find('input[type="text"],input[type="number"]') .each(function () { $(this).val(""); }); });Código jQuery 2
clearLink.on("click", function () { let fieldsArray = [ totalHomeSqftInput, calcRoofSqftInput, annualKwInput, calcKwInput, systemSizeInput, roofCompInput, pwrWallBattInput, totalCostInput, roofPriceBeforeItc, estTotalBeforeItc, estItc, pwrWallPriceBeforeItc, ]; $.forEach(fieldsArray, function () { $(this).trigger("reset"); }); });Cualquier ayuda sería muy apreciada.
Gracias
Un enfoque sería etiquetar los elementos de entrada que desea borrar con un atributo data-clear . Puede usar un selector para buscar estos valores de entrada y borrarlos usando cada llamada.
Ver demostración:
$("#clear-link").on("click", function(e) { $("#calc-form-section-1 input[data-clear='true']").each(function(i) { $(this).val(""); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="clear-section" class="clear-section"> <form id="calc-form-section-1"> <input type="text" data-clear="true" id="totalHomeSqftInput" value="abc" /><br /> <input type="text" data-clear="true" id="calcRoofSqftInput" value="abc" /><br /> <input type="text" data-clear="true" id="annualKwInput" value="abc" /><br /> <input type="text" data-clear="true" id="calcKwInput" value="abc" /><br /> <input type="text" data-clear="true" id="systemSizeInput" value="abc" /><br /> <input type="text" id="other" value="abc" /><br /> <a id="clear-link" href="javascript:void(0)">Clear</a> </form> </section>