動態添加和刪除jquery按鈕

JavaScript和jQuery的新手，但我試圖動態添加按鈕，然後刪除它們，當他們被點擊。如果一個按鈕已經存在了（在同一個類中，我創建了新的按鈕），它可以被刪除。如果用戶添加了新按鈕，則該按鈕無法控制。我也嘗試了在類似帖子中提到的.live方法無濟於事。任何幫助表示讚賞。謝謝。動態添加和刪除jquery按鈕

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title> test </title> 
    <script src="jquery-1.6.2.js"></script> 
    <script> 
    /* 
     $(document).ready(function(){  
     $(".btn :button").click(function(){ 
      $(this).remove(); 
     }); 
    */ 
    $(".btn :button").live("click", function(){ 
     $(this).remove(); 
    }); 

    function add() { 
     // $(".btn").append("<button> new one </button>"); 
     $("<button> new one </button>").insertAfter(".btn"); 
    }; 
    </script> 
</head> 
<body> 
    <div class="btn"> 
    <button> test </button> 
    </div> 
    <br /><br /> 
    <div class="adding"> 
    <button onclick='add()'> add </button> 
    </div> 
</body> 
</html>

來源

2011-11-15 jtwg

$("button").live("click", function(){ 
    $(this).remove(); 
});

，或者，如果你想刪除父容器，以及：

$("button").live("click", function(){ 
    $(this).parent().remove(); 
});

UPDATE：

如果你只想要一個特定的div裏面的按鈕，試試這個：

$(".adding button").click(function() { 
    $('.adding').before('<div class="btn"><button>new one</button></div>'); 
}); 

$(".btn button").live("click", function() { 
    $(this).parent().remove(); 
});

來源

2011-11-15 09:04:21

感謝您的回覆，我會重新發布，但這也會刪除我的添加按鈕。它存在於不同的div中。否則，它似乎工作，所以我很有希望。感謝您的幫助 – jtwg

已更新。檢查出來：http://jsfiddle.net/samliew/X2dR8/ –

謝謝。這很棒。 – jtwg

你不需要一個:前button選擇

$(".btn button").live("click", function(){ 
    $(this).remove(); 
    });

來源

2011-11-15 09:03:16

感謝您的答覆和投票。出於某種原因，這對我不起作用。我嘗試了與沒有冒號的第一次發佈相同的代碼，它仍然沒有效果。不確定是否有任何瀏覽器問題，但它不適用於Chrome瀏覽器或Safari瀏覽器。我嘗試了jquery的託管版本（來自jquery下載頁面），以防我的問題出現，但仍然沒有任何結果。如果我能找出問題 – jtwg

動態添加和刪除jquery按鈕

回答

相關問題