Question

我创建了一个表格，其中删除/删除按钮对我不起作用。我尽了最大努力，但它不适合我。请帮助我如何使这个擦除按钮可用。

$(".butnBorrar").click(function(event) {
  $("#table125").each(function() {
    $(this).closest('tds').remove();
  });
});

$("#insert15").click(function() {
  $("#table125").each(function() {

    var tds = '<tr>';
    jQuery.each($('tr:last td', this), function() {
      tds += '<td>' + $(this).html() + '</td>';
    });
    tds += '</tr>';
    if ($('tbody', this).length > 0) {
      $('tbody', this).append(tds);
    } else {
      $(this).append(tds);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="table125" class="table table-bordered table-hover">
  <input type="button" class="btn green" value="Add New+" id="insert15"></input>
  <thead>

    <th>Subject</th>
    <th>Marks</th>

  </thead>
  <tbody>
    <tr>

      <td>
        <input type="text" class="form-control subject1" name="subject1">
      </td>&nbsp;&nbsp;&nbsp;&nbsp;
      <td>
        <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1">
      </td>
      <td class="total">
        <button type="button" class="butnBorrar">
          Erase
        </button>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

这是一个完整的例子： -

注意 - ＆GT;此技术用于处理点击事件冒泡，用于向页面添加动态HTML。

＆＃13;

    $(document).on('click','.butnBorrar',function(event) {
      //console.log('clicked');
      $(this).closest('tr').remove();
    });
    var template = $('#table125 > tbody:last-child').html();
    $("#insert15").click(function() {
      $('#table125 > tbody:last-child').append(template);
      
    });

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <table id="table125" class="table table-bordered table-hover">
    <input type="button" class="btn green" value="Add New+" id="insert15"></input>
    <thead>

      <th>Subject</th>
      <th>Marks</th>

    </thead>
    <tbody>
      <tr>

        <td>
          <input type="text" class="form-control subject1" name="subject1">
        </td>&nbsp;&nbsp;&nbsp;&nbsp;
        <td>
          <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1">
        </td>
        <td class="total">
          <button type="button" class="butnBorrar">
            Erase
          </button>
        </td>
      </tr>
    </tbody>
  </table>

</body>

</html>

＆＃13;

希望它有所帮助。

Answer 2

你需要这样做

$(document).on('click', '.butnBorrar', function(event) {

  $(this).parent().parent().remove();

  // OR

  $(this).closest('tr').remove();

});

＆＃13;

$(document).on('click', '.butnBorrar', function(event) {
  //$("#table125").each(function() {
  $(this).parent().parent().remove();

  //or

  //$(this).closest('tr').remove();
  //});
});

$("#insert15").click(function() {
  $("#table125").each(function() {

    var tds = '<tr>';
    jQuery.each($('tr:last td', this), function() {
      tds += '<td>' + $(this).html() + '</td>';
    });
    tds += '</tr>';
    if ($('tbody', this).length > 0) {
      $('tbody', this).append(tds);
    } else {
      $(this).append(tds);
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table125" class="table table-bordered table-hover">
  <input type="button" class="btn green" value="Add New+" id="insert15"></input>
  <thead>

    <th>Subject</th>
    <th>Marks</th>

  </thead>
  <tbody>
    <tr>

      <td>
        <input type="text" class="form-control subject1" name="subject1">
      </td>&nbsp;&nbsp;&nbsp;&nbsp;
      <td>
        <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1">
      </td>
      <td class="total">
        <button type="button" class="butnBorrar">
          Erase
        </button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

你应该使用$（文件）.on（＆＃39;点击＆＃39;，＆＃39; .butnBorrar＆＃39;而不是：

$(document).on('click', '.butnBorrar' , function(event) {
   $(this).closest('tr').remove();
});

这样jQuery就会侦听文档上的click事件，如果目标元素是.butnBorrar（例如），则会触发该函数。如果动态添加元素并不重要 - click事件始终在文档上，jQuery将检查目标元素（并相应地执行）。

以下是对代码段的更新：

＆＃13;

$(function(){
	
$(document).on('click', '.butnBorrar' , function(event) {
    $(this).closest('tr').remove();
});

$("#insert15").click(function() {
  $("#table125").each(function() {

    var tds = '<tr>';
    jQuery.each($('tr:last td', this), function() {
      tds += '<td>' + $(this).html() + '</td>';
    });
    tds += '</tr>';
    if ($('tbody', this).length > 0) {
      $('tbody', this).append(tds);
    } else {
      $(this).append(tds);
    }
  });
});
	
});

＆＃13;

<table id="table125" class="table table-bordered table-hover">
  <input type="button" class="btn green" value="Add New+" id="insert15"></input>
  <thead>

    <th>Subject</th>
    <th>Marks</th>

  </thead>
  <tbody>
    <tr>

      <td>
        <input type="text" class="form-control subject1" name="subject1">
      </td>&nbsp;&nbsp;&nbsp;&nbsp;
      <td>
        <input type="text" class="form-control marks1 allownumericwithoutdecimal" name="marks1">
      </td>
      <td class="total">
        <button type="button" class="butnBorrar">
          Erase
        </button>
      </td>
    </tr>
  </tbody>
</table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

删除按钮不在表

3 个答案: