Question

我的目标是使用Boostrap动态创建多个行的结构，看起来像一个表，看起来如果<html>表结构将解决我的问题，但不是这样的。到现在为止，我可以使用添加按钮成功添加每一行（<div>），其中包含所有组件。所有组件都是正确的并且单独创建。但是我想要删除一行。出于这个原因，在想要删除的情况下，我向每行添加了删除按钮。

只有第一行没有删除按钮，因为默认情况下应该至少有一行visibel。使用下面显示的代码，我只能删除第二行，并且只有在我向代码添加警报消息时才能正常工作（删除所有被删除的行）。对我来说这很奇怪，我看不出问题

$("#var_conteiner a").click(function(){//var_conteiner general div with the row structure

                var current_dinamic_id = $(this).attr('id');
                var arr_tmpid = current_dinamic_id.split("");

                if(arr_tmpid[0]=='d'){
                    var current_del_btn_id = $(this).attr('id');
                    var tmp_del_id = current_del_btn_id.split("del");
                    alert(tmp_del_id[1]);
                    $("#conteiner_"+tmp_del_id[1]).remove();
                }

        });

每行的结构如下所示：

<div id="var_conteiner">
    <div class="row">
        <div class="col-xs-10">
            <div class="col-xs-2">
                <input type="text">
            </div>
            <div class="col-xs-1">
                <input type="text">
            </div>
            <div class="col-xs-1">
                <a><img src="public/images/del.png" width="16" height="16"></a>
            </div>
        </div>
    </div>

    </div>

JSFiddle here

Answer 1

我想指出关于你的代码的两件事：

1. id是唯一的，不能复制到其他元素。使用多个具有相同功能的元素时，最好使用一个类。

2.您的代码可以通过一行缩小。看看我在这篇文章中插入的片段。

＆＃13;

function bindEvents() {
  $(".remove").unbind("click").click(function() { //var_conteiner general div with the row structure
    checkContainers($(this));
  });

  $(".add").unbind("click").click(function() {
    $(this).parents("div.container").clone().appendTo("body");
    bindEvents(); //bind events after adding a new "row"
  });
}

function checkContainers(el) {
  if ($("div.container").length > 1) {
    el.parents("div.container").remove();
  }
}

bindEvents(); //execute it for the first time

＆＃13;

.container {
  width: 200px;
  border: 2px solid black;
  background-color: lightblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-10">
      <div class="col-xs-2">
        <input type="text">
      </div>
      <div class="col-xs-1">
        <input type="text">
      </div>
      <div class="col-xs-1">
        <button class="add">
          Add
        </button>
        <button class="remove">
          Remove
        </button>
      </div>
    </div>
  </div>

</div>

＆＃13;

修改我编写了一些代码，因为你不想删除＆＃34;行＆＃34;什么时候只有一个。

如何创建和删除动态<div>与几个组件Jquery？

1 个答案: