Question

javascript和jQuery的新手，但我正在尝试动态添加按钮，然后在点击它们时将其删除。如果已经存在一个按钮（在我创建新按钮的同一个类中），则可以将其删除。如果用户添加了新按钮，则该按钮无法控制。我也试过类似帖子中提到的.live方法无济于事。任何帮助表示赞赏。感谢。

<!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>

Answer 1

在:选择器

之前，您不需要button

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

Answer 2

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

或者，如果你想删除父容器：

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

<强>更新

如果您只想要特定div中的按钮，请尝试以下方法：

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

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

使用jquery动态添加和删除按钮

2 个答案: