清除排序，事件监听按钮js答案

【问题标题】：Clear sort, event listener button js清除排序，事件监听按钮js
【发布时间】：2019-02-24 17:54:17
【问题描述】：

我想创建一个按钮来重置页面上的所有过滤器。啤酒事件列表。

我有几个单选按钮。我有一个可以按价格、尺寸和颜色分类的项目列表（单击单选按钮）。

当我点击按钮（重置按钮）时，我希望删除过滤器并且项目返回到过滤前的位置。

这是我的代码

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>

我正在删除选中的属性。但是元素不会返回到它们的原始位置，它们是按照它们对这个事件进行排序的顺序。

如何解决这个问题？

【问题讨论】：

旁注：函数map完全没有必要，改用函数forEach。
@Due，你能提供.choice--radio元素的代码吗？
有几种情况和几种可能性，只有发布HTML和排序功能才能评估。参考如何制作minimal reproducible example。
@ЧебаковДмитрий 我添加了 HTML 代码
@zer00ne 我添加了 HTML 代码

标签： javascript html sorting

【解决方案1】：

您可以轻松使用Form reset() 方法，即

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

尝试以下方法：

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

然后继续将脚本声明为：

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

请尝试一下。

【讨论】：