Question

所以我正在创建一个简单的javascript程序，允许我添加文本框和删除按钮，单击它时删除按钮及其旁边的文本框：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>

<div id="space">
<div>
    <input type="text" class="in"/>
    <button class="btn" id="1">Remove</button>
</div>
</div>
<button id="add">Add</button>
<br/>
<button id="cacl">Calculate</button>
<br/>
<div id="container">
</div>
</body>
</html>

这是脚本

 $(function () {
    var i=2;
    $("#add").click(function () {
        $("#space").append('<div><input type="text" class="in"/> <button class="btn" id="'+i+'">Remove</button> <br/></div>');
        i++;
    });

    $(".btn").on('click', function () {
        console.log("OK");
        $(this).parent().remove();
    })
});

然而，当我点击删除按钮时没有任何反应甚至没有记录“确定”。

有什么想法吗？

Answer 1

使用$("#space").on('click', '.btn', function() {进行动态事件委派（对于现在或将来的元素）。 jQuery docs .on()

$(function() {
  var i = 2;
  $("#add").click(function() {
    $("#space").append('<div><input type="text" class="in"/> <button class="btn" id="' + i + '">Remove</button> <br/></div>');
    i++;
  });

  $("#space").on('click', '.btn', function() {
    console.log("OK");
    $(this).parent().remove();
  })
});

<div id="space">
  <div>
    <input type="text" class="in" />
    <button class="btn" id="1">Remove</button>
  </div>
</div>

<button id="add">Add</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另一种方法是在创建时将侦听器添加到删除按钮（请注意，在这种情况下，已存在的最大ID为45）

var App = App || {

  /**
   * Get and store maximal button ID already present in #space
   */
  spaceButtonId: $("#space").find(".btn").get().reduce((id, el) => {
      return Math.max(id, el.id)
  }, 0),
  
  /**
   * Remove Field
   */
  removeSpaceField() {
      console.log("REMOVED ID: "+ this.id);
      $(this).closest(".field").remove();
  },
  
  /**
   * Create Field
   */
  createSpaceField() {
      App.spaceButtonId++;
      console.log("CREATED ID: "+ App.spaceButtonId);
      
      return $("<div/>", {
        "class": "field",
        appendTo: "#space",
        prepend: "<input type='text' class='in'>",
        append: $("<button/>", {
          id: App.spaceButtonId,
          "class": "btn",
          text: "Remove",
          type: "text",
          on: { click: App.removeSpaceField }   // For dynamically created elements
        })
      });
  }

};


/**
 * DOM ready and $ alias secured stuff:
 */
jQuery(function( $ ) { 

  $("#add").on('click', App.createSpaceField );
  $(".btn").on('click', App.removeSpaceField ); // For already present elements
  //  (no need to dynamically delegate since handled by App at button creation)

});

<div id="space">
  <div class="field"> <!-- P.S: ADD CLASS TO WRAPPER FIELD -->
    <input type="text" class="in"><button class="btn" id="1">Remove</button>
  </div>
  <div class="field">
    <input type="text" class="in"><button class="btn" id="45">Remove</button>
  </div>
</div>

<button id="add">Add</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

如果您只想删除REMOVE按钮和文本区域。只需使用以下代码：

$(function () {
    var i=2;
    $("#add").click(function () {
        $("#space").append('<div><input type="text" class="in"/> <button class="btn" id="'+i+'">Remove</button> <br/></div>');
        i++;
    });

    $(".btn").click(function () {
        $(".in, .btn").hide();
    });
});

删除按钮无法正常工作

2 个答案: