父位置更改时，jQuery删除元素

Question

I am making a website with a sticky navbar and would a symbol to appear when the navbar reaches the very top of the page (user scrolls down) and disappear when the navbar leaves the top of the page (the user scrolls up). 我正在制作一个带有导航栏的网站，当导航栏到达页面的顶部（用户向下滚动）时，会出现一个符号；当导航栏离开页面的顶部（用户向上滚动）时，该符号会消失。 So far I can make the symbol appear but not reappear. 到目前为止，我可以使该符号出现但不能重新出现。

Below is the js code and the HTML for the nav: 以下是导航的js代码和HTML：

 $(document).ready(function() { var distance = $('#navbar').offset().top, $window = $(window); $(window).scroll(function() { if ($window.scrollTop() < distance) { $("#nav").remove( "<li id=\\"navSymbol\\"><a href=\\"#\\">▲</a></li>"); } if ($window.scrollTop() >= distance) { if ($("#navSymbol").length) { console.log("not adding") } else { $("#nav").prepend( "<li id=\\"navSymbol\\"><a href=\\"#\\">▲</a></li>"); } } }); });

 <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <div style="height: 25vw;"></div> <div class="sticky-top" id="navbar" style="padding-top: 3vw; padding-bottom: 3vw; background-color: white;"> <ul class="nav justify-content-center sticky-top" id="navcontent"> <li class="nav-item"> <a class="nav-link active" id="nav" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" id="nav" href="#">Staffing</a> </li> <li class="nav-item"> <a class="nav-link" id="nav" href="#">Marketing and Finance</a> </li> <li class="nav-item"> <a class="nav-link" id="nav" href="#">Future Prospects</a> </li> </ul> </div> <div style="height: 100vw;"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> </script>

Hope someone can help! 希望有人能帮忙！

Answer 1

When you call the remove method, you are not removing your node right now. 调用remove方法时，您现在不删除节点。

The remove method without argument is removing the current node. 不带参数的remove方法将删除当前节点。
The remove method with argument is removing the element from the provided selector. 具有参数的remove方法是从提供的选择器中删除元素。

By providing the HTML, you will generate a selector for a node not attached to the DOM document. 通过提供HTML，您将为未附加到DOM文档的节点生成选择器。 Removing it is then having no impact as he's not there. 删除它并没有影响，因为他不在。

You can try something like this : 您可以尝试这样的事情：

$(document).ready(function() {
    var distance = $('#navbar').offset().top,
        $window = $(window);

    $(window).scroll(function() {
    if ($window.scrollTop() < distance) {
        $("#navSymbol").remove();
    }

    if ($window.scrollTop() >= distance) {
        if ($("#navSymbol").length) {
            console.log("not adding")
        } else {
            $("#nav").prepend("<li id=\"navSymbol\"><a href=\"#\">▲</a></li>");
        }
    }
});

Answer 2

You can also just hide your element with jQuery hide function. 您也可以使用jQuery hide函数隐藏元素。 And show it again with the show function. 并使用show功能再次显示它。

 $(document).ready(function() { var previous_distance = 0; $(window).scroll(function() { var distance = $('#navbar').offset().top; if (previous_distance < distance) { $("#navSymbol").hide(); } else { $("#navSymbol").show(); } previous_distance = distance }); });

 <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <div style="height: 25vw;"></div> <div class="sticky-top" id="navbar" style="padding-top: 3vw; padding-bottom: 3vw; background-color: white;"> <ul class="nav justify-content-center sticky-top" id="navcontent"> <li id="navSymbol"><a href=\\"#\\">▲</a></li> <li class="nav-item"> <a class="nav-link active" id="nav" href="#about">About</a> </li> <li class="nav-item"> <a class="nav-link" id="nav" href="#">Staffing</a> </li> <li class="nav-item"> <a class="nav-link" id="nav" href="#">Marketing and Finance</a> </li> <li class="nav-item"> <a class="nav-link" id="nav" href="#">Future Prospects</a> </li> </ul> </div> <div style="height: 100vw;"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> </script>

Answer 3

There is an error in your code 'remove' method removes nodes contained in the jQuery collection that initiated the call At the time 'remove()' is called. 您的代码“ remove”方法中存在错误，该方法删除了在调用“ remove（）”时启动调用的jQuery集合中包含的节点。

You could use 你可以用

 $("#nav").text("About");

instead of 代替

$("#nav").remove(
    "<li id=\"navSymbol\"><a href=\"#\">▲</a></li>");

Answer 4

$(document).ready(function() {

var distance = $('#navbar').offset().top,
$window = $(window);


$(window).scroll(function() {
if ($window.scrollTop() < distance) {
  $("#navSymbol").remove();


}

if ($window.scrollTop() >= distance) {
  if ($("#navSymbol").length) {
    console.log("not adding")

  } else {
    $("#nav").prepend(
      "<li id=\"navSymbol\" ><a href=\"#\">▲</a></li>");
  }
}


});

});

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<div style="height: 25vw;"></div>

<div class="sticky-top" id="navbar" style="padding-top: 3vw; padding-bottom: 3vw; background-color: white;">
  <ul class="nav justify-content-center sticky-top" id="navcontent">
    <li class="nav-item">
      <a class="nav-link active" id="nav" href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Staffing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Marketing and Finance</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="nav" href="#">Future Prospects</a>
    </li>
  </ul>
</div>

<div style="height: 100vw;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>

Please use the remove() function to remove any element because jquery give function to remove the specific element. 请使用remove（）函数删除任何元素，因为jquery提供了删除特定元素的函数。

父位置更改时，jQuery删除元素

问题描述

4 个解决方案

解决方案1
2 已采纳 2019-08-01 09:55:20

解决方案2
0 2019-08-01 09:55:26

解决方案3
0 2019-08-01 10:02:05

解决方案4
0 2019-08-01 10:05:14

父位置更改时，jQuery删除元素

问题描述

4 个解决方案

解决方案1 2 已采纳 2019-08-01 09:55:20

解决方案2 0 2019-08-01 09:55:26

解决方案3 0 2019-08-01 10:02:05

解决方案4 0 2019-08-01 10:05:14

解决方案1
2 已采纳 2019-08-01 09:55:20

解决方案2
0 2019-08-01 09:55:26

解决方案3
0 2019-08-01 10:02:05

解决方案4
0 2019-08-01 10:05:14