在新的搜索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

使用Javascript：

您可以使用通配符选择器id^=来搜索文本以shoesize或stockxprice开头的所有ID，然后在所有这些ID中使用循环清除值，例如：

document.querySelectorAll('[id^=shoesize]').forEach(el => el.innerHTML='')
document.querySelectorAll('[id^=stockxprice]').forEach(el => el.innerHTML='')

更多信息：

• Attribute selectors
• document.querySelectorAll()
• document.querySelectorAll()

---

使用Jquery：

使用jQuery，这应该简单得多。我们可以在jQuery中使用与选择器相同的开始，例如：

forEach()

或，

forEach()

Answer 2

如果元素在

$('[id^=shoesize]').html('')
$('[id^=stockxprice]').html('')

内部]，则可以使用

$('[id^=shoesize]').empty();
$('[id^=stockxprice]').empty();

方法。

---

HTMLFormElement.reset（）：

HTMLFormElement.reset（）方法将还原表单元素的默认值。此方法与单击表单的重置按钮的作用相同。

您可以在此处阅读更多信息：form

---

form.reset()
HTMLFormElement.reset

EDIT：

如果元素不在

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