Clearing data on New search Javascript

Question

[![enter image description here][1]][1]I am looking to clear out all the fields that are filled in from this script below when a second search is entered. This script fills in 25 boxes with shoe-sizes and prices after for looping through it all, the problem is if the next item searched does not have the same number of shoe sizes (which is often), the boxes are left with the previous data (ex. First shoe goes up to size 15, the next shoe search only goes up to size 12, so sizes 12.5-15 are left with the previous data because its not overwriting them).

  $('#searchForm').on('submit', (e) => {
    e.preventDefault();
    let searchText = $('#search-box').val();
    $.ajax({
          url: "/",
          type: 'POST',
          data: { 
           input: searchText},
           success: function(res) {
              console.log(res);

              let product = res;

              document.getElementById("shoe").innerHTML = (product.stockx.shoeId);
              document.getElementById("date").innerHTML = (product.stockx.release);
              document.getElementById("sneakerid").style.backgroundImage = 'url('+(product.photo)+')';  
              document.getElementById("shoeOverlay").style.backgroundImage = 'url('+(product.photo)+')';  

              let size = product.stockx.price_size


              for( let i = 0; i < size.length; i += 1) {
                document.getElementById(i === 0 ? `shoesize` : `shoesize${i}`).innerHTML = (size[i].sizing), 
                document.getElementById(i === 0 ? `stockxprice` : `stockxprice${i}`).innerHTML = ('$' + size[i].pricing);

              } 


              for( let i = 0; i < product.sizes.length; i += 1) {
              document.getElementById(i === 0 ? `goatprice` : `goatprice${i}`).innerHTML = ('$' + product.sizes[i][1]*.01);
              if (product.sizes[i][1]*.01 > size[i].pricing) document.getElementById(i === 0 ? `goatprice` : `goatprice${i}`).style.color = "#00ffb3";
              else if (product.sizes[i][1]*.01 < size[i].pricing) document.getElementById(i === 0 ? `stockxprice` : `stockxprice${i}`).style.color = "#00ffb3";

                }


            }}
      )})
})

HTML snippet

       <table class="table">
          <tr>
            <td>
              <div class="innerbox">
                <div id="shoesize" ></div>
                  <div class="prices">
                    <div id="stockxprice"></div>
                    <div id="goatprice"></div>
                  </div>
                    <div class="logocontainer">
                      <div class="stockxlogo"> <img src="img/stockxlogo.svg" ></div> 
                       <div class="goatlogo"><img src="img/goatlogo.svg" height="30px" width="30px"></div> 

                  </div>



<form id="searchForm">
                   <input type="text" autocomplete="off" id="search-box">
                   <div class="searchlogo"> <img src="img/searchlogo.svg" height="15px" width="15px" href="#"></div>
                  </form>

                </div>


  [1]: https://i.sstatic.net/plWLo.jpg

Answer 1

If the elements are inside a form, you can use the form.reset() method.

---

HTMLFormElement.reset():

The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's reset button.

you can read more here: HTMLFormElement.reset

---

Run and test:

function resetForm() {
  let form = document.getElementById("myForm");
  form.reset();
}

<form id="myForm">
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
  <input type="text" value="" />
</form>

<input type="button" value="reset" onclick="resetForm()" />

---

EDIT: If the elements are not inside a form:

If your elements are not inside a form, you can then give them all a common class name to help you iterate through them.

Run and test:

function resetElems() {
  $(".resetable").html("");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="shoesize" class="resetable">15</div>
<div class="prices">
  <div id="stockxprice" class="resetable">13</div>
  <div id="goatprice" class="resetable">14</div>
</div>

<input type="button" value="click to reset" onclick="resetElems()" />

---

EDIT 2: To only reset on the second search and after:

If you wish to only perform the reset after the first search you can declare a global variable to keep count of the searches (increment it on every search) and then do something like this:

var count = 0; // this variable is global; it's not inside any function

$('#searchForm').on('submit', (e) => {
    e.preventDefault();
    let searchText = $('#search-box').val();
    $.ajax({
        url: "/",
        type: 'POST',
        data: { 
            input: searchText
        },
        success: function(res) {
            if(count > 0) {  // only reset if it's not the first search
                $(".resetable").html("");
            }

            count++;         // increment the count

            // other code ...
        }
    });
});