jquery：刪除表單中的元素從按鈕

Question

我想要刪除表單中的元素，它工作正常，只有問題用戶必須單擊兩次以刪除元素，之後，所有工作正常，只有第一次用戶必須單擊兩次任何想法或類似問題？

這裏是我的代碼

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

它是如此明顯，因爲你在呼喚一個onClick函數中，你再次註冊了點擊事件處理程序。因此，請移除onclick並只註冊DOM Ready事件的點擊。

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

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

Answer 3

• 上$(document).ready

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

<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>

如果是動態添加元素刪除內聯的事件處理程序

調用功能，使用Event delegation，

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

<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>

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

這應該爲你工作....

$(document).ready(function(){ 
 
    $(".remove-button").click(function() { 
 
    $('.has-delete').remove(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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">Remove</button> 
 
     </div> 
 
    </div> 
 
</div>

Answer 6

當您第一次點擊該按鈕，您deleteParentElement函數會執行一個將單擊事件處理程序附加到元素的函數。 它現在不執行代碼。現在已經連接了一個點擊事件處理程序，下次單擊它時，$(".remove-button").click(function(event)中的代碼將執行並且您的元素將被刪除。

您的問題有兩種解決方案。

解決方案-1 編輯你的腳本這個

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

}

解決方案 - 2 編輯您的HTML這個

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

和你的腳本這個

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