Javascript 单击以删除父div

虽然我不知道自己做错了什么，但我正在为一些看起来很基本的事情而奋斗

我希望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--;
  })

});

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

});

$（文档）.ready（函数（）{
var max_fields=4；//允许的最大输入框数
var wrapper=$（“#addDriverContent div:first”）；
var add_button=$（“.add_字段_button”）；//添加按钮ID
变量x=0
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
//允许的最大输入框
如果（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>

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

目录
添加驱动程序

看一看

---

（我已经开始了）

您的javascript有两个问题

您将

单击事件处理程序

附加到错误的元素。您附加到的元素在页面上甚至不可见，并且从未单击过

您尝试删除单击内容的行是错误的<代码>$（this）.parent（）.remove（）就足够了

$（文档）.ready（函数（）{
var max_fields=4；//允许的最大输入框数
var wrapper=$（“#addDriverContent div:first”）；
var add_button=$（“.add_字段_button”）；//添加按钮ID
变量x=0
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x

您需要在第一个过程中添加新的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--;
        })
    }
});

});

$（文档）.ready（函数（）{
var max_fields=4；//允许的最大输入框数
var wrapper=$（“#addDriverContent div:first”）；
var add_button=$（“.add_字段_button”）；//添加按钮ID
变量x=0
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
如果（x

将事件侦听器更改为以下内容：

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

我做了两个改变：

将

$（包装器）

更改为

$（“克隆包装器”）

。

.remove_字段

链接被添加到包装器克隆中，而不是包装器本身（从

附录（$（'clone_wrapper'））

）

将

$（this.parent（）.sibling（'#content'）

更改为

$（this.parent（）

）。父对象是

#内容

——您不想删除它的同级

---

我重构了你的代码，这更干净有效。解释在评论中

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>

<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

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

});

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

});

$（函数（$）{
var max_字段=4；
//原点选择器将选择所有第一个div祖先。
var$content=$（“#addDriverContent>.content”）；
var$clone_wrapper=$（“#clone_wrapper”）；
var$add_button=$（“.add_字段_button”）；//添加按钮ID
$add_按钮。单击（功能（e）{
e、 预防默认值（）；
//jquery对象是类似数组的对象。长度表示选择了多少个元素。
if（$clone\u wrapper.children（“.content”）.length

---

虽然这段代码可能会解决这个问题，但它确实有助于提高文章的质量。请记住，您将在将来回答读者的问题，这些人可能不知道您的代码建议的原因。还请尽量不要用解释性注释挤满你的代码，这会降低代码和解释的可读性！非常感谢你。我选择了@ozan答案。：）感谢Lambda Ninja的提示，我承认我的解释很糟糕，所以我对你的答案投了赞成票。不客气，格罗斯勒，在这两个问题上都比我强=P+1谢谢你抽出时间。我已经尝试过使用parent（）了，现在我正在尝试其他方法。再次感谢您；）JSFIDLE不工作。我对移除有疑问，如果我们有超过3-4名家长，那么如何移除工作？例如，删除