在 JavaScript 或 JQuery 中删除元素

Question

我有两个视图页面。在这两页上，我都有一个项目列表，旁边有一张星星的图片。在第一页，我可以点击星星，它会变成蓝色或灰色。在第二页上，如果星星是蓝色的，我点击它，我想删除与之关联的父 div。当我重新加载整个页面时它会删除它，但不会立即删除它。如何在不点击重新加载按钮的情况下立即将其从页面中删除？

这是在我要删除父 div 的 result.html.erb 中。需要明确的是，当我单击与钻石 div 关联的星时，我想删除整个 div 并单独保留珍珠 div。

<div id="result">
  <div class="diamond">
    <a target="_blank" href="www.website.com">diamond</a>
    <img class="star-pic" src="/assets/star-blue.png" alt="star pic">
  </div>
  <div class="pearl">
    <a target="_blank" href="www.website.com">pearl</a>
    <img class="star-pic" src="/assets/star-blue.png" alt="star pic">
  </div>
</div>

这是在我的 application.js 中

var favoriteGems = JSON.parse(localStorage.getItem("gems")) || []

function changeStar(){
  if($(this).attr("src") == "/assets/star-gray.png"){
    $(this).attr("src", "/assets/star-blue.png")
    favoriteGems.push($(this).closest("div").first().text().replace(/\s+/g, ''))
    localStorage.setItem("gems", JSON.stringify(favoriteGems))
  }
  else if ($(this).attr("src") == "/assets/star-blue.png"){
    $(this).attr("src", "/assets/star-gray.png")
    favoriteGems = favoriteGems.filter(item => item !== $(this).closest("div").first().text().replace(/\s+/g, ''))
    localStorage.setItem("gems", JSON.stringify(favoriteGems))
    $("#result").remove("."+item)
    $("#result").show()
  }
}

$(".star-pic").on("click", changeStar)

我试过了

$("#result").remove("."+item)
location.reload()

这也不起作用。

任何指导将不胜感激。

Answer 1

$("#result").remove("."+item) 中的item 可能不是您想要的值。您可以在此行之前添加var item = $(this).closest("div").first().text().replace(/\s+/g, '')。

你可以像这样重构changeStarfurther：

function changeStar() {
  var targetItem = $(this).closest("div").first().text().replace(/\s+/g, '');
  var favoriteGems = JSON.parse(localStorage.getItem("gems")) || [];
  if($(this).attr("src") === "/assets/star-gray.png"){
    $(this).attr("src", "/assets/star-blue.png")
    favoriteGems.push(targetItem)
    localStorage.setItem("gems", JSON.stringify(favoriteGems))
  }
  else if ($(this).attr("src") === "/assets/star-blue.png"){
    $(this).attr("src", "/assets/star-gray.png")
    favoriteGems = favoriteGems.filter(item => item !== targetItem)
    localStorage.setItem("gems", JSON.stringify(favoriteGems))
    $("#result").remove("." + targetItem)
    $("#result").show()
  }
}

Answer 2

说实话，这看起来有点神秘，但为什么不简单地打电话

$(this).parent().remove(); 

？并清理一下html结构和js

<div id="result">
<div class="diamond">
  <a target="_blank" href="www.website.com">diamond</a>
  <img class="star-pic blue-star" src="/assets/star-blue.png" alt="star pic" data-info="diamond">
</div>
<div class="pearl">
  <a target="_blank" href="www.website.com">pearl</a>
  <img class="star-pic blue-star" src="/assets/star-blue.png" alt="star pic" data-info="pearl">
</div>
</div>

var favoriteGems = JSON.parse(localStorage.getItem("gems")) || []

function changeStar(){
  if($(this).hasClass('gray-star')){
    $(this).attr("src", "/assets/star-blue.png");
    $(this).removeClass('grey-star').addClass('blue-star');
    favoriteGems.push($(this).data('info'));
    localStorage.setItem("gems", JSON.stringify(favoriteGems));
  }
  else if ($(this).hasClass('blue-star')){
    $(this).attr("src", "/assets/star-gray.png");
    $(this).removeClass('blue-star').addClass('gray-star');
    favoriteGems = favoriteGems.filter(item => item !== $(this).data('info'));
    localStorage.setItem("gems", JSON.stringify(favoriteGems))
    $(this).parent().remove();
    $("#result").show();
  }
}

（也可能使用 svg 路径作为星星并通过 css 类控制颜色？）