时间戳

首页 > 解决方案 > 删除从 php 获取的元素，并与从 jquery 动态创建的输入结合

php - 删除从 php 获取的元素，并与从 jquery 动态创建的输入结合

问题描述

我正在尝试通过单击按钮动态添加输入。有一个删除输入按钮以及动态创建的输入元素。这将删除输入元素。我已经实现了这一点，并进一步将输入值插入到 mysql db 中。我对此没有任何问题。

现在，当我从我的数据库（while 循环）中获取现有值时，现有输入值与相同的删除按钮一起创建。单击删除按钮不会删除元素，但是当我单击插入输入然后删除时，它可以工作。

我没有找到解决这个问题的方法。如果有人可以请帮忙。下面是我的代码。

我的 HTML

<span id="insertblank">
    <button type="button" class="btn" id="custom-button">Insert Input</button>
</span>

<div class="col-md-12 form-group fillin-answer">
  <!-- My PHP WHILE loop would actually be here, but for illustration, I have manually inserted the elements as below -->
   <!-- BEGIN INSERTED ELEMENTS -->
   <div class="blanksanswers" id="removeans1">
     <label class="removeans1">
        Input <span>1</span><span class="text-danger">*</span>
        <button type="button" class="btn btn-sm btn-danger remove" data-id="1">
          Remove 1 Input
        </button>
     </label>
     <div class="input-group removeans1">
       <input class="form-control" id="fillin_answer1" name="fillin_answer[]" value="some values"/>
     </div>
   </div>
   <!--END INSERTED ELEMENTS-->
</div>

查询

var count = 0;
var customButton = document.querySelector('#custom-button');
           customButton.addEventListener('click', function(event) {
               count++;
                   var new_input = '<div class="blanksanswers" id="removeans'+count+'"><label class="removeans'+count+'" style="color:#333D79FF; font-size:15px;">Input <span>'+count+'</span><span class="text-danger">*</span><button type="button" class="btn btn-sm btn-danger remove" data-id="'+count+'">Remove '+count+' Input</button></label><div class="input-group removeans'+count+'"><input class="form-control" id="fillin_answer'+count+'" name="fillin_answer[]" /></div></div>';
                   $('.fillin-answer').append(new_input);
                   $('.removeans'+count).on("click",".remove", function(e){ 
                       e.preventDefault();
                       var id = this.getAttribute("data-id");
                       $("#removeans"+id).remove();
                       if($(".blanksanswers").length == 0) {
                           count=0;
                           questc=0;
                       }
                   })
               //}
           });

我的代码笔在这里。

感谢任何帮助。

标签： phpjquery

解决方案

您删除按钮不起作用，因为您正在添加EventListener，custom-button所以它只有在您点击后才会起作用custom-button。

您可以尝试使用以下代码class代替id元素。

$(document).ready(function(){
  $('body').on('click','#custom-button',function(){
    var new_input = '<div class="blanksanswers" ><label class="removeans" style="color:#333D79FF; font-size:15px;">Input <span></span><span class="text-danger">*</span><button type="button" class="btn btn-sm btn-danger remove">Remove Input</button></label><div class="input-group removeans"><input class="form-control" id="fillin_answer" name="fillin_answer[]" /></div></div>';
    $('.fillin-answer').append(new_input);
  });
  
  $('body').on('click','.remove',function(){
    $(this).closest('.blanksanswers').remove();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="insertblank">
    <button type="button" class="btn" id="custom-button">Insert Input</button>
</span>

<div class="col-md-12 form-group fillin-answer">
  <!-- My PHP WHILE loop would actually be here, but for illustration, I have manually inserted the elements as below -->
   <!-- BEGIN INSERTED ELEMENTS -->
   <div class="blanksanswers" id="removeans1">
     <label class="removeans1">
        Input <span>1</span><span class="text-danger">*</span>
        <button type="button" class="btn btn-sm btn-danger remove" data-id="1">
          Remove 1 Input
        </button>
     </label>
     <div class="input-group removeans1">
       <input class="form-control" id="fillin_answer1" name="fillin_answer[]" value="some values"/>
     </div>
   </div>
   <!--END INSERTED ELEMENTS-->
</div>

推荐阅读