单击以删除父 div

Question

我正在为一些看起来很基本的东西而奋斗，尽管我没有看到我做错了什么。

我希望 onClick 将某个 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>

看看my fiddle。

（我从this example开始）

Answer 1

你的javascript有两个问题

1. 您将click event handler 附加到错误的元素。您附加到的元素甚至在页面上都不可见，并且永远不会被点击。
2. 您尝试删除点击内容的行是错误的。 $(this).parent().remove() 就够了。

See Updated Fiddle

$(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--;
});

Working Example.

我做了两个改变：

1. 将$(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/