Question

我设法让我添加一个克隆按钮工作，但我现在无法让删除按钮工作。想知道人们是否可以看到问题我猜我完全错了。

这是jsfiddle中的代码 http://jsfiddle.net/AFfa2/

<div class="question">
                    <div class="questiontext">
                    20. Details of Children
                    </div>  
                <div id="question20">
                    <div class="questiontitles">
                        Family Name<br>
                        Given Names<br>
                        Sex<br>
                        Date of Birth<br>
                        Country of Birth
                    </div>
                    <div class="questionanswer">
                    <input type="text" name="children" class="textbox">
                    <input type="text" name="children" class="textbox">
                    <input type="text" name="children" class="textbox">
                    <input type="text" name="children" class="textbox">
                    <input type="text" name="children" class="textbox">
                    </div>
                </div>
                </div>
                <div id="Child" class="question">
                    <div id="addChild" class="questiontitles">
                        <input type="button" value="Add Child Info"> 
                    </div>
                    <div id="deleteChild" class="questionanswers">
                        <input type="button" value="Delete Child Info">
                    </div>
                </div>

$("#addChild").click(function(){
        var newElement =$('<div/>').html($("#question20").html());
        newElement.addClass('input');
        $("#question20").after(newElement);
    }); 

    $("#deleteChild").click(function() {
    if(childId > 0) childId--;
    $("#child"+childId).slideUp();
    if ($("#deleteChild").css("display") == "none") $("#deleteChild").slideUp();
    });

Answer 1

试试这个答案

$("#addChild").click(function () {
            var newElement = $('<div id="childdiv"/>').html($("#question20").html());
            newElement.addClass('input');
            $("#question20").after(newElement);
            childId++;
        });
        $("#deleteChild").click(function () {
            var div = document.getElementById('childdiv');
            if (div) {
                div.parentNode.removeChild(div);
            }

        });

Answer 2

  $("#addChild").click(function(){
  $(".question20:last").after($(".question20:first").clone(true));
 });


 $("#deleteChild").click(function() {
 if($(".question20").length!=1)
   $(".question20:last").remove();
});



 <div class="question20"> //and the div got class instead of id since cloning the div with same id is not good

http://jsfiddle.net/AFfa2/4/

Answer 3

DEMO

由rps

发布的更新代码

因为它删除了所有div元素。修改它不会删除原始表单元素。

$("#addChild").click(function () {
    $(".question20:last").after($(".question20:first").clone(true));
});


$("#deleteChild").click(function () {
    if ($('.question20').length > 1) {
        $(".question20:last").remove();
    }
});

Answer 4

试试这个jsfiddle

<div id="question20" class="input">
                <div id="question20">20. Details of Children
                    <br>Family Name
                    <input type="text" name="children" class="textbox">
                    <br>Given Names
                    <input type="text" name="children" class="textbox">
                    <br>Sex
                    <input type="text" name="children" class="textbox">
                    <br>Date of Birth
                    <input type="text" name="children" class="textbox">
                    <br>Country of Birth
                    <input type="text" name="children" class="textbox">
                    <br>
                </div>
                        <div id="removeChild">
                            <input type="button" value="Remove Child Info">                                 
                        </div>
            </div>
            <div id="addChild" class="input">
                <input type="button" value="Add Child Info"> 
            </div>

jQuery代码

    $("#addChild").click(function(){
    var newElement =$('<div/>').html($("#question20").html());
    newElement.addClass('input');
    $("#question20").after(newElement);
});

$('#removeChild').click(function(){
    $(this).parent().remove();
});

Answer 5

这可能有效

$("#deleteChild").click(function() {
    $('#question20').parent().children('.input:last').remove();
});

http://jsfiddle.net/HLpJP/

但是你在插入新行的地方遇到了问题。您在question20之后插入新行，这些行将显示在现有行之前。 remove方法将删除最后一个，因此可能不是您想要的行为。

Answer 6

这是jsfiddle链接：http://jsfiddle.net/AFfa2/5/

添加删除按钮

<div id="removeChild">
                <input type="button" value="Remove Child Info"> 
            </div>

和jquery

    $("#removeChild").click(function(){

。

$（ 'div.input'）得到（$（本）。长度）卸下摆臂（）; }）;

你需要更改按钮div类

在jQuery中添加和删除克隆？

6 个答案: