清除新搜索的数据 Javascript

Question

[![在此处输入图片描述][1]][1]我希望在输入第二次搜索时清除从下面的脚本中填写的所有字段。这个脚本在循环遍历之后用鞋码和价格填充了 25 个框，问题是如果搜索的下一个项目没有相同数量的鞋码（通常是这样），这些框将保留以前的数据（例如，第一双鞋子的尺码为 15，下一个鞋子搜索的尺码为 12，因此尺码 12.5-15 保留在之前的数据中，因为它不会覆盖它们）。

  $('#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 片段


       <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.stack.imgur.com/plWLo.jpg

Answer 1

如果元素 位于 form 内，您可以使用 form.reset() 方法。

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.

您可以在此处阅读更多内容：HTMLFormElement.reset

运行和测试：

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()" />

编辑： 如果元素 不在 form 中：

如果您的元素不在表单内，您可以给它们一个共同的 class 名称以帮助您遍历它们。

运行和测试：

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()" />

编辑 2： 仅在第二次搜索后重置：

如果您希望仅在第一次搜索后执行重置，您可以声明一个全局变量来记录搜索次数（在每次搜索时增加它），然后执行如下操作：

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 ...
        }
    });
});

清除新搜索的数据 Javascript

Clearing data on New search Javascript

javascript

search

field