单击锚点后，焦点将更改为页面顶部

Question

我有一个移动网站，我正在使用bootstrap。我有一个动态添加的div，其中包含一个带有font-awesome关闭图标的锚点。

<div class="row lineitem"> 
  <div class="col-lg-2"> 
    <a href="#" class="anchorclass"><i class="fa fa-times-circle"></i></a> 
  </div> 
  <div class="col-lg-10"> <p><span class="list-names">22 lbs </span></p> 
  </div> 
</div>

点击关闭图标后，使用Jquery删除整个div：

$(document).on("click", ".anchorclass", function () {
    $(this).parents(".lineitem").remove();
 });

问题是，在删除div 后，焦点会转移到页面顶部。由于它是一个移动网站，因此非常烦人。我已将.focus()放在.remove()之后的主父div中，但这也不起作用。

Answer 1

尝试阻止链接的默认行为，如下所示：

$(document).on("click", ".anchorclass", function (e) {
    e.preventDefault();
    $(this).parents(".lineitem").remove();
});

Answer 2

使用event.preventDefault();：

$(document).on("click", ".anchorclass", function(e) {
  e.preventDefault();
  $(this).parents(".lineitem").remove();
});

另一个建议是不使用.parents()，但您可以使用.closest()，而不是.parents()：

$(document).on("click", ".anchorclass", function(e) {
  e.preventDefault();
  $(this).closest(".lineitem").remove();
});