时间戳

首页 > 解决方案 > 如何在 jQuery 中应用 delect 功能

javascript - 如何在 jQuery 中应用 delect 功能

问题描述

嗨，我在引导程序中有一个由 jquery 附加的表单（通过单击按钮，它一次又一次地打开），我希望当我单击垃圾图标时它会从前端删除，我想通过单击垃圾图标删除表单的屏幕截图

在此处输入图像描述

引导代码：

  <div class="col-md-4 create-task-btn1" style="padding-top: 155px;">
      <span class="btn btn-info btn-lg dashboard-icon appendTest" 
                                                        style="width: 140px; height: 100px; font-size: 20px; padding-top: 15px;">
        <i class="fa fa-plus fa-1x"></i>
        <br>
          Assign Task
       </span>
 </div>

jQuery代码：

  $(document).ready(function(){
$('.appendTest').click(function() {
    $('#exampleIdTest').append(`<div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
            <form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
                <table class="table table-bordered" style="width: 82%; margin-top: 40px; margin-left: 350px;">
                    <tbody>
                        <tr>
                            <th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
                            <td colspan="3">
                                <input type="text" class="form-control" value="" name="subject"></td>
                            <td rowspan="3">
                                <a data-id="" data-toggle="modal" data-original-title="" class="enable-tooltip btn" style="color: red; font-size: 20px;"><i class="fa fa-trash-o"></i></a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
                            <td><input type="text" class="form-control" value="" name="subject"></td>
                            <th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
                            <td><input type="text" class="form-control" value="" name="subject"></td>
                        </tr>
                    </tbody>
                </table>
            </form>
            </div>
        </div> 
  </div>`);
  });
  });

标签： javascriptjquerybootstrap-4

解决方案

JavaScript 代码只是简单地改变了现在工作正常。希望这对你有帮助

function remove_item(_this) {
  
  jQuery(_this).parent().parent().parent().parent().parent().parent().parent().parent().remove()
}
$(document).ready(function() {
  $('.appendTest').click(function() {
    $('#exampleIdTest').append(`<div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
            <form action="#" id="" method="post" class="form-horizontal" role="form" novalidate="novalidate">
                <table class="table table-bordered" style="width: 82%; margin-top: 40px; margin-left: 350px;">
                    <tbody>
                        <tr>
                            <th scope="row" style="font-size: 14px;">Task<span class="text-danger">*</span></th>
                            <td colspan="3">
                                <input type="text" class="form-control" value="" name="subject"></td>
                            <td rowspan="3">
                                <a data-id="" data-toggle="modal" data-original-title="" onClick="remove_item(this)" class="enable-tooltip btn" style="color: red; font-size: 20px;">Delete</a>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row" style="font-size: 14px;">Assigned To<span class="text-danger">*</span></th>
                            <td><input type="text" class="form-control" value="" name="subject"></td>
                            <th style="font-size: 14px;">Due Date<span class="text-danger">*</span></th>
                            <td><input type="text" class="form-control" value="" name="subject"></td>
                        </tr>
                    </tbody>
                </table>
            </form>
            </div>
        </div> 
  </div>`);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >

<div class="col-md-4 create-task-btn1" style="padding-top: 155px;">
  <span class="btn btn-info btn-lg dashboard-icon appendTest" style="width: 140px; height: 100px; font-size: 20px; padding-top: 15px;">
        
          Assign Task
       </span>
</div>

<div id="exampleIdTest"></div>

推荐阅读