Question

我正在编写一个代码，可以动态地将行添加到购物车中。它们是每行前面的删除按钮，用于删除该行。当用户按下按钮时，应该抓取该按钮的父级，然后实现remove（）方法以删除该行。但这种方式对我不起作用..任何人都能告诉我我做错了什么？以下是我的代码

      <div class="container" id="dynamic">
                 <div class="row " id="main-row">
                   <div class="col-sm-1  " id="serial">1</div>
                    <div class="col-sm-2  ">
                    <select class="container-fluid">
                        <option value="1">Computer</option>
                        <option value="2">Mobile</option>
                        <option value="3">LCD</option>
                        <option value="4">Keyboard</option>
                        <option value="5">Mouse</option>
                    </select>
                </div>
         <div class="col-sm-2 "><input class="length" type="number" min="1"          name="name" value="" /></div>
          <div class="col-sm-2 "><input class="length" type="text" name="text"      value="" min="1" /></div>
        <div class="col-sm-2"><input class="length" type="text" min="1"/></div>
                <button class="btn-primary col-sm-1 del ">Delete</button>
             </div>

          </div>
          <button class="btn btn-primary" id="button1">Add Row</button>
        </section>

这是我的jquery代码。

 //code for adding rows dynamically
 var counter = 1;
$(function () {

$("#button1").click(function () {
    counter++;
    $('#dynamic').append($("#main-row").clone().attr("id",counter-1));
    $("#serial").text(counter);

     });
 });
   //code for deleting row
  $('.del').click(function () {
    $(this).parent().remove();
   });

Answer 1

由于您要动态添加行，因此您需要使用delegated event handler。

同时使用a.arrow::after { display:block; content: ""; width: 63px; height: 59px; background-image: url(../../img/arrow.png); position: relative; background-repeat: no-repeat; }代替this以避免删除所有行。

".del"

否则，新的$(document).on('click', '.del', function () { $(this).parent().remove(); });对象将无法获得click事件。

按按钮使用jquery删除行

1 个答案: