單擊以刪除父div

Question

我正在努力尋找看似非常基本的東西，盡管我沒有看到我做錯了什么。

我想要點擊某個div克隆到最多4次。 （到目前為止一直很好），我想要一個刪除按鈕，刪除插入的一個div。

我的問題就在那里。 我無法讓刪除按鈕工作。

JS

$(document).ready(function() {
  var max_fields      = 4; // maximum input boxes allowed
  var wrapper         = $("#addDriverContent div:first"); 
  var add_button      = $(".add_field_button"); // Add button ID
  var x = 0

  $(add_button).click(function(e) {
    e.preventDefault();
    // max input box allowed
    if(x < max_fields) {
      x++; 
      $(wrapper).clone().append('<a href="#" class="remove_field">Remove</a>').appendTo($('#clone_wrapper'));}
  });

  // user click on remove text
  $(wrapper).on("click",".remove_field", function(e) {
    e.preventDefault();
    $(this).parent().sibling('#content').remove();
    x--;
  })

});

HTML

<div id="addDriverContent" style="display:none;">
  <div id="content">
    Contents
  </div>
</div>

<button type="button" class="add_field_button" id="clone_button">ADD DRIVER</button>
<div id="clone_wrapper"></div>

看看我的小提琴 。

（我從這個例子開始）

Answer 1

你的javascript有兩個問題

1. 您正在將click event handler附加到錯誤的元素。 您附加的元素在頁面上甚至不可見，並且從不單擊。
2. 您嘗試刪除所點擊內容的行是錯誤的。 $(this).parent().remove()就足夠了。

查看更新的小提琴

$(document).ready(function() {
    var max_fields = 4; //maximum input boxes allowed
    var wrapper = $("#addDriverContent div:first");
    var add_button = $(".add_field_button"); //Add button ID
    var x = 0

    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++;
            $(wrapper).clone().append('<a href="#" class="remove_field">Remove</a>').appendTo($('#clone_wrapper'));
        }
    });

    $(document).on("click", ".remove_field", function(e) { //user click on remove text
        e.preventDefault();
        $(this).parent().remove();
        x--;
    })
});

Answer 2

將您的事件監聽器更改為以下內容：

$("#clone_wrapper").on("click",".remove_field", function(e) {
    e.preventDefault(); $(this).parent().remove(); x--;
});

工作實例 。

我做了兩處改動：

1. 將$(wrapper)更改$(wrapper) $("#clone_wrapper") 。 .remove_field鏈接被添加到包裝器克隆，而不是包裝器本身（來自appendTo($('#clone_wrapper')) ）
2. 將$(this).parent().sibling('#content')更改$(this).parent() 。 父級是 #content - 你不想刪除它的兄弟。

Answer 3

您需要在第一個函數中添加新的onclick函數，並更改您的選擇器，如下所示：

$(document).ready(function() {
var max_fields      = 4; //maximum input boxes allowed
var wrapper         = $("#addDriverContent div:first"); 
var add_button      = $(".add_field_button"); //Add button ID
var x = 0

$(add_button).click(function(e) {
e.preventDefault();
 if(x < max_fields){ //max input box allowed
            x++; 
        $(wrapper).clone().append('<a href="#" class="remove_field">Remove</a>').appendTo($('#clone_wrapper'));
        $(".remove_field").click( function(e){ //user click on remove text
            e.preventDefault(); 
            $(this).parent().remove(); 
            x--;
        })
    }
});

});

Answer 4

我重構了你的代碼，它更干凈，更有效。 解釋正在評論中。

HTML

<div id="addDriverContent" style="display:none;">

    <!-- if your element is going to cloned, use class instead of id. id should always be unique. -->
    <div class="content">

        <!-- because your content is already invisible, why note put your remove btn in it? -->
        <a href="#" class="remove_field">Remove</a>

    </div>
</div>

<button type="button" class="add_field_button" id="clone_button">ADD DRIVER</button>

<div id="clone_wrapper"></div>

JS

$(function($) {

var max_fields        = 4; 

// origin selector would select all the first div ancestors.
var $content          = $("#addDriverContent > .content");     

var $clone_wrapper    = $("#clone_wrapper") ;

var $add_button       = $(".add_field_button"); //Add button ID

$add_button.click(function(e) {
    e.preventDefault();

    // jquery object is array liked object. Length mean how many elements is selected.
    if ( $clone_wrapper.children(".content").length < max_fields ) 

      $content.clone().appendTo($clone_wrapper);
});

$clone_wrapper.on("click",".remove_field", function(e){ 
    e.preventDefault(); 

    // this would be more specific.
    $(this).parent(".content").remove(); 
})

});

https://jsfiddle.net/xm4sesa2/10/