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

标签 jquery

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>

最佳答案

$("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 - 使用 jquery 动态添加和删除按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8133768/

相关文章:

c# - MVC 4 - 验证码.Mvc

Javascript else 循环在 if 循环执行后执行

jquery - 如何创建大约 200 张图像的 Sprite ?

jquery - Jquery中按Enter键时触发点击事件

jQuery 画廊有附加的侧边栏描述吗?

javascript - jquery 和 data-attr 在 ie8 中不起作用

javascript - 证券交易方计算

javascript - Jquery:获取不是具有相同类名的元素的后代的类的所有元素?

jquery - $.serializeArray() 不包括表单内的所有字段

HTML 重绘上的 jquery 事件处理程序