清除排序，事件監聽器按鈕js

Question

我想創建一個按鈕來重置頁面上的所有過濾器。 Ale EventListery。

我有幾個單選按鈕。 我有一個可以按價格，尺寸和顏色分類的項目列表（單擊單選按鈕）。

當我單擊按鈕（重置按鈕）時，我希望刪除過濾器，並且項目在過濾之前返回其位置。

這是我的代碼

function stop() {
  Array.from(document.querySelectorAll('.choice--radio')).map(x => x.removeEventListener("click", sortNumber));
  Array.from(document.querySelectorAll('.choice--radio')).map(x => x.checked = false);
}

clear.addEventListener('click', stop);

HTML代碼

<ul class="sort__options">
        <li>
          <input class="choice choice--radio" name="sort" type="radio" id="sort-title">
          <label class="choice__label" for="sort-title">title</label>
        </li>
        <li>
          <input class="choice choice--radio" name="sort" type="radio" id="sort-subscribers">
          <label class="choice__label" for="sort-subscribers">subscribers</label>
        </li>
        <li>
          <input class="choice choice--radio" name="sort" type="radio" id="sort-videos">
          <label class="choice__label" for="sort-videos">videos</label>
        </li>
        <li>
          <input class="choice choice--radio" name="sort" type="radio" id="sort-views">
          <label class="choice__label" for="sort-views">views</label>
        </li>
      </ul>

我正在刪除選中的屬性。 但是元素不會恢復其原始位置，而是按照對事件進行排序的順序進行。

如何解決這個問題呢？

Answer 1

您可以輕松地使用Form reset()方法

document.getElementById("myForm").reset();

嘗試以下方法：

<input type="button" onclick="myFunction()" value="Reset Button">

然后繼續並將腳本聲明為：

<script>
function myFunction() {
document.getElementById("myForm").reset();
}
</script>

請嘗試一下。