Question

我正在尝试删除表单中的元素，它工作正常，只有问题用户必须单击两次才能删除元素，之后一切正常，只有第一次用户必须点击两次任何想法或类似问题？< / p>

这是我的代码

function deleteParentElement(){
             $(".remove-button").click(function(event) {
             $(this).parents('.has-delete').remove();
               return false; 
            });                  
        }

这里是HTML

<div class="input-group has-delete">
    <div class="row">
        <div class="col-md-12">
            <input type="text" class="form-control input yellow" value="" name="license_plates[' + rowCount + ']" id="license_plate">
            <button class="btn btn-input  remove-button" onclick="deleteParentElement();" type="button"><i class="icon-close"></i></button>
        </div>
    </div>
</div>

Answer 1

在你的函数中，你附加了一个click事件监听器，当触发它时会删除父元素，你应该直接删除该元素。

function deleteParentElement(){
    $(this).parents('.has-delete').remove();
}

但这仍然是应用此类事件处理程序的错误方法。您可以删除deleteParentElement函数并获得相同的结果：

$(document).ready(function() {

    /* your code */

    $(".remove-button").on("click", function() {
        $(this).parents(".has-delete").remove()
    })
})

Answer 2

删除内联事件处理程序
在$(document).ready

＆＃13;

$(document).ready(function() {
  $(".remove-button").click(function(event) {
    $(this).parents('.has-delete').remove();
    return false;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="input-group has-delete">
  <div class="row">
    <div class="col-md-12">
      <input type="text" class="form-control input yellow" value="" name="license_plates[' + rowCount + ']" id="license_plate">
      <button class="btn btn-input  remove-button" type="button"><i class="icon-close"></i></button>
    </div>
  </div>
</div>

＆＃13;

如果动态添加元素，请使用 Event delegation ，

＆＃13;

$(document).ready(function() {
  $("body").on('click', '.remove-button', function(event) {
    $(this).parents('.has-delete').remove();
    return false;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="input-group has-delete">
  <div class="row">
    <div class="col-md-12">
      <input type="text" class="form-control input yellow" value="" name="license_plates[' + rowCount + ']" id="license_plate">
      <button class="btn btn-input  remove-button" type="button"><i class="icon-close"></i></button>
    </div>
  </div>
</div>

＆＃13;

Answer 3

这很明显，因为你正在调用一个onClick函数，你在其中再次注册一个事件处理程序。因此，删除onclick并注册点击DOM Ready事件。

<button class="btn btn-input  remove-button">

          $(".remove-button").click(function(event) {
             $(this).parents('.has-delete').remove();
               return false; 
            });

Answer 4

<div class="input-group has-delete">
    <div class="row">
        <div class="col-md-12">
            <input type="text" class="form-control input yellow" value="" name="license_plates[' + rowCount + ']" id="license_plate">
            <button class="btn btn-input  remove-button"  type="button"><i class="icon-close"></i></button>
        </div>
    </div>
</div>

<script>
 $(".remove-button").click(function(event) {
             $(this).parents('.has-delete').remove();
               return false; 
            });  

</script>

Answer 5

第一次单击按钮时，将执行From: CN=deepak sethi/O=MHI函数，该函数将click事件处理程序附加到元素。 它现在不执行代码。现在已经附加了一个click事件处理程序，下次单击它时，deleteParentElement中的代码会执行，并且您的元素将被删除。< / p>

您的问题有两种解决方案。

<强> 解-1 编辑脚本

$(".remove-button").click(function(event)

}

<强> 解-2 将HTML编辑为此

function deleteParentElement(){
$(this).parents('.has-delete').remove();

和你的脚本

            <button class="btn btn-input  remove-button" type="button"><i class="icon-close"></i></button>

Jquery：从按钮中删除表单中的元素

5 个答案: