Question

我要为新项目添加删除按钮。此删除按钮从页面中删除项目my-item而不影响其他项目。

我尝试过的代码：

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset = "UTF-8">
    <title>Simple Demo</title>
    <style>
      .my-item{
      width:250px;
      heigth:180px;
      margin:10px;
      padding:20px;
      background:green;
      border:2px solid black;
      }
      .item-header{
      width:150px;
      heigth:120px;
      margin:5px;
      padding:10px;
      background:yellow;
      border:1px solid black;
      }
      .item-body{
      width:70px;
      heigth:50px;
      margin:3px;
      padding:5px;
      background:purple;
      border:1px solid black;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#divButton").click(function(){
          $(".my-item").clone().appendTo("body")

          });

          $("#toggle").click(function(){
            if ($(".item-body").is(":visible")){
              $(".item-body").slideUp("normal");
            }else{
              $(".item-body").slideDown("normal");
            }
          });

          $("#deleteButton").click(function(){
            $(".my-item").append(".my-item"+ "button        class="deleteButton">Delete</button>");
          });
        });
    </script>
  </head>
  <body>
    <div class="my-item">
      <div class="item-header">
        <h2 id="toggle">Click Me!</h2>
        <div class="item-body">My Text!
        </div>
      </div>
    </div>
    <button id="divButton">Click!</button>
    <button id="deleteButton">Delete!</button>
  </body>
</html>

如果你能帮助我，我会很高兴的。：）

Answer 1

就这么简单：

$(".my-item").remove();

（如果我理解你的问题）

Answer 2

我找到了一些可以改进的东西。首先。 id是唯一的，因此无论何时开始克隆元素，都会克隆id。

我做了一些调整，这就是它的工作原理：

<强> HTML

<div class="my-item">
  <div class="item-header">
    <h2 id="toggle">Click Me!</h2>
    <div class="item-body">My Text!
    </div>
  </div>
  <button class="divButton">Click!</button>
  <button class="deleteButton">Delete!</button>
</div>

CSS （仍然相同）

.my-item {
  width: 250px;
  heigth: 180px;
  margin: 10px;
  padding: 20px;
  background: green;
  border: 2px solid black;
}

.item-header {
  width: 150px;
  heigth: 120px;
  margin: 5px;
  padding: 10px;
  background: yellow;
  border: 1px solid black;
}

.item-body {
  width: 70px;
  heigth: 50px;
  margin: 3px;
  padding: 5px;
  background: purple;
  border: 1px solid black;
}

<强>的jQuery

function addEvents() {
  $(".divButton").unbind("click").click(function() {
    $(this).parent().clone().appendTo($("body"));
    addEvents();
  });

  $(".deleteButton").unbind("click").click(function() {
    $(this).parent().remove();
  });
}

addEvents();

我将两个单击事件放在一个单独的函数中的原因是克隆元素时，不会克隆事件。因此，你必须重新绑定它们。删除元素时不会发生这种情况。

我希望这能解决你的问题

FIDDLE

Answer 3

猜猜你的意思是这样的：

$("#deleteButton").click(function(){
   $(this).nextAll(".my-item").remove();
});

这将删除删除按钮后的所有.my-item而不是模板。

只是一个通知，当您克隆.my-item元素时，您将获得多个＆＃34;切换＆＃34; DOM中的ID，这是不好的。

Answer 4

我建议对js使用单引号而不是双引号：

$('selector');

以下行错误：

$(".my-item").append(".my-item"+ "button class="deleteButton">Delete</button>");

正确的是：

$(".my-item").append("<button class=\"deleteButton\">Delete</button>");

或

$('.my-item').append('<button class="deleteButton">Delete</button>');

点击按钮＆＃34;点击！＆＃34>您的代码不会生成新元素。并点击＆＃34;删除＆＃34; -Button。

添加新的删除按钮

我想你要归档的是复制一个Item并在项目本身上添加一个删除按钮。

只需克隆你的元素而不附加并将其保存到var。（var newElement = $。（＆＃39; selectpr＆＃39;）。clone（）;）

然后将删除按钮附加到newElement对象并将对象追加到目标。

另一种方法是将克隆附加到容器中，然后通过查找容器中的最后一个元素来选择它。然后将单击事件绑定到删除按钮。

请查看jQuery和CSS手册以获取正确的选择器。

Answer 5

好的，这里有一个不同的解决方案，你有缓存元素，没有重复的ID。

<script>
    $(document).ready(function() {
        var $myItem = $(".my-item");
        var $deleteBtn = $("<button/>",{"class":"deleteButton"}).text('Delete').on({
            click: function() {
                $(this).closest('.my-item').remove();   // delete item
            }
        });

        // enable toggle of item body
        $(".toggle").click(function() {
            $(this).next(".item-body").slideToggle("normal");
        });

        // Add new item
        $("#divButton").click(function(){
            var $newItem = $myItem.clone(true);
            $("body").append($newItem.append($deleteBtn.clone(true)));
        });
    });
</script>

这是你的HTML正文部分：

<body>
    <div class="my-item">
        <div class="item-header">
            <h2 class="toggle">Click Me!</h2>
            <div class="item-body">My Text!</div>
        </div>
    </div>
    <button id="divButton">Click!</button>
</body>

将删除按钮添加到div

5 个答案: