Question

html表格：

<span id="contactSpan" class="repeatEntry">
<ul>
   <div id="contactSpan-1" class="subSpan-1">
      <li>
          <input type="text" id="contactname-1" name="contactname-1" class="contactname"                title="Enter your Full Name" value="<?php echo $_POST['contactname']?>"/>
      </li>
      <li>
           <input id="contactemail-1" type="email" name="contactemail-1" class="contactemail" title="Enter your email address" value="<?php echo $_POST['contactemail']?>"/>
      </li>
      <li>
         <input id="contactmobile-1" type="tel" name="contactmobile-1" class="contactmobile" value="<?php echo $_POST['contactmobile']?>"/>
      </li>
      <li>
          <input type="button" class="remove-this-button" style="display:None" id="remove-this-button-1" name="remove-this-button-1" value="Remove contact">
      </li>
   </div>
</ul>
</span>
<input type="button" class="addMore" id="addContact" name="addContact" value="Add another contact">

我正在尝试克隆完整＆lt; DIV＆GT;类。我能够克隆它。最初，“删除联系人”按钮不是显示的，但随后在克隆元素中将显示它。

“删除联系人”对我不起作用，点击此按钮，我试图删除整个父母＆lt; DIV＆GT;被克隆的班级。

代码示例：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var idIncrement = 1;
$(function () {

//remove div class function  -- not Woking

  function removeDiv(){
    alert("check123");
    $(this).parent('div').remove();
  }


// cloning the entire contact "div" -- Working

  $('input.addMore').on('click', function () {
        idIncrement++;
        var $table = $('#contactSpan');
        var $tr = $table.find('div').eq(0).clone();
        $tr.appendTo($table).find('input').val('');

        $tr.appendTo($table).find(".remove-this-button").removeAttr("style");
        $tr.appendTo($table).find(".remove-this-button").attr("value", "Remove Contact").on("click", removeDiv);
        $tr.appendTo($table).find(".remove-this-button").attr("name","remove-this-button-"+idIncrement);        
        $tr.appendTo($table).find(".remove-this-button").attr("id","remove-this-button-"+idIncrement);
    });

});

</script>

它可以从删除按钮中删除样式属性，点击它也会调用函数removeDiv。在removeDiv函数上触发警报。但是只有remove（）部分无效。

Answer 1

我不确定你的重复appendTo并找到。尝试只追加一次你的$ tr也是一个div，而不是一行，容器是一个跨度而不是div。生成的html无效。在任何情况下，你都希望.closest在树上旅行

 $tr.appendTo($table).find(".remove-this-button")
   .on("click", function() {
    $(this).closest('div').remove(); 
   })
   .attr("value", "Remove Contact")

Answer 2

parents是您的解决方案。

获取当前匹配元素集中每个元素的祖先，可选择通过选择器进行过滤。

parent仅返回直接父母。

.parents（）和.parent（）方法类似，只是后者只在DOM树中向上移动一层。

Here is working demo

试试这个：

$(this).parents('div').remove();

指出父母将返回所有父div，以便获得第一次尝试：

$(this).parents('div')[0].remove();

删除提供的input元素的父元素

2 个答案: