javascript - 函数调用后停止网页跳转回顶部

Question

我正在使用 ViewBag 将列表传递到 View 中。然后，我使用列表上的 foreach 将列表中的每个字符串一一显示为 href。我有一个功能，允许用户单击每个 href 将其从列表中删除。问题是，当用户单击 href 将其从列表和 View 中删除时，网页会跳回顶部。我有什么办法可以阻止这一切吗？例如当用户单击从列表中删除 href 字符串时，页面将保持在原来的位置

编辑.cshtml

<div class="form-group" style="min-height: 100px">
    <div class="col-md-10" style="min-height: 100px">
        <hr />
        <p><strong>Flagged Questions</strong></p>
        @foreach (var item in ViewBag.FLagList)
        {
        <div>
            <a href="#" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">@item</a>
        </div>
        }
    </div>
</div>

功能

<script>
    function onDelete(elm, id) {
    // Do something with id
    console.log(id)
    elm.parentNode.removeChild(elm)
}
</script>

Answer 1

您需要从 anchor 标记中删除`href 属性 然后您可以为 anchor 提供自定义 css，以恢复由于删除 href att 而丢失的样式。

 <a class='custom-link' onclick="this.parentNode.parentNode.removeChild(this.parentNode)">@item</a>

.custom-link:link {
  background-color: yellow;
}

.custom-link:visited {
  background-color: cyan;
}

.custom-link:hover {
  background-color: lightgreen;
}

.custom-link:active {
  background-color: hotpink;
}