javascript - 在 jQuery 中添加和删除克隆？

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

score 2 · Accepted Answer

试试这个答案

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

        });

score 1 · Accepted Answer

  $("#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/

score 1 · Accepted Answer

演示

rps发布的更新代码

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

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


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

score 0 · Accepted Answer

试试这个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();
});

score 0 · Accepted Answer

这可能有效

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

http://jsfiddle.net/HLpJP/

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

score 0 · Accepted Answer

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

添加删除按钮

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

和jQuery

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

$('div.input').get($(this).length).remove(); });

您需要更改按钮 div 类

javascript - 在 jQuery 中添加和删除克隆？

6 回答 6

Related

Reference