在JavaScript或JQuery中刪除元素

我有兩個視圖頁面。在這兩頁上，我都有一張帶有星號旁邊圖片的項目列表。在第一頁上，我可以點擊這個星星，它會變成藍色或灰色。在第二頁上，如果星星是藍色的，我點擊它，我想刪除關聯它的父div。它會在我重新加載整個頁面時刪除它，但不會立即刪除它。我怎樣才能立即從頁面上刪除它，而無需點擊重新加載按鈕？在JavaScript或JQuery中刪除元素

這是在我的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()

而且也不管用。

任何指導將不勝感激。

來源

2017-07-06 C. Yee

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

您可以進一步這樣的重構changeStar：

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() 
    } 
}

來源

2017-07-06 21:56:51 wesley6j

感謝您的幫助！這是錯誤的價值。我還將$（「＃result」）。show（）轉換爲location.reload（）。現在它正在做我想做的事情。出於某種原因$（「＃result」）。show（）不起作用。 –

要真誠，這看起來有點神祕，但爲什麼不叫簡單

$(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類的顏色？）

來源

2017-07-06 23:06:12

感謝您的建議和反饋！ –

在JavaScript或JQuery中刪除元素

回答

相關問題