Question

所以我正在构建这个测验，并且我正在使用jQuery添加额外的问题和答案。现在我也想删除问题和答案。

HTML：

<div id="tab1" class="questionsList">
    <br/>
    <button type="button" onclick="addAwnser(1)">Add Awnser</button>
    <br/>
    <br/>
    Question: <input type="text" placeholder="What's your question?" name="question[]"/><br/><br/>
    <div class="awnsersList">
          <input type="text" class="question" name="awnser[1][]" placeholder="awnser"/>
          <input type="checkbox" name="correct_awnser[1][]" value="1"/>
<form method="post" action="">
<div class="col-md-12">
    <div class="well">
        <div class="input-group">
            <input type="text" name="quizName" class="form-control" placeholder="Quiz name" aria-describedby="basic-addon1">
        </div>
        <hr/>
        <button id="add-tab" type="button"> Add Question</button>
        <div id="tabs">
            <ul>
                <li><a href="#tab1" class="ActiveQuestion">1</a></li>
            </ul>
            <div id="tab1" class="questionsList">
                <br/>
                <button type="button" onclick="addAwnser(1)">Add Awnser</button>
                <br/>
                <br/>
                Question: <input type="text" placeholder="What's your question?" name="question[]"/><br/><br/>
                <div class="awnsersList">
                    <input type="text" class="question" name="awnser[1][]" placeholder="awnser"/>
                    <input type="checkbox" name="correct_awnser[1][]" value="1"/>
                </div>
            </div>
        </div>
        <button value="Save quiz" type="submit">Submit</button>
    </div>
</div>

jQuery的：

$(document).ready(function() {
    window.awnserCount = 2;
    window.count = 0;
    $("div#tabs").tabs();
    $("button#add-tab").click(function() {
        $("div#tabs").tabs("refresh");

        var num_tabs = $("div#tabs ul li").length + 1;

        $("div#tabs ul").append("<li><a href='#tab" + num_tabs + "'>" + num_tabs + "</a></li>");
        $("div#tabs").append("<div id='tab"+num_tabs+"' class='questionsList'>"+
        "<br/><button type='button' onclick='addAwnser("+num_tabs+")'>Add Awnser</button><br/><br/>"+
        "Question: <input type='text' placeholder='Whats your question?' name='question[]'/><br/><br/>"+
        "<div class='awnsersList'>"+
        "<input type='text' class='question' name='awnser["+num_tabs+"][]' placeholder='1st awnser'/>"+
        "<input type='checkbox' name='correct_awnser[1][]' value='1'/><br/>"+
        "</div>"+
        "<button onclick='removeQuestion(" + num_tabs + ")' type='button'>Remove this question</button>"+
        "</div>");

        $("div#tabs").tabs("refresh");
    });
});


function removeQuestion(questionId){
    removeCurrent(questionId);

    checkNumbers(questionId);
}

function removeCurrent(questionId) {
    $("#tabs li a").each(function (){
        if ($(this).html() == questionId) {
            $(this).remove().hide().css("display", "none");
            $("div#tabs").tabs("refresh");
            window.count ++;
        }
        $("#tab" + questionId).remove().css("display", "none");
        $("div#tabs").tabs("refresh");
    });
    $("div#tabs").tabs("refresh");
}

function checkNumbers(number){
    $( "#tabs li a" ).each(function() {
        var curreId = $(this).attr("id").split('id-');
        if(curreId[1] > number){
            $(this).html((curreId[1] - 1));
        }
    });
    $("div#tabs").tabs("refresh");
}

function countCurrentAwnsers(QuestionId){
    inputs = 0;
    window.inputs = 0;
    var inputs =  $("div#tab"+QuestionId +" .awnsersList").find($("input[type='checkbox']"));
    console.log(inputs.length + 1);

    window.inputs = inputs;

}

function addAwnser(QuestionId){
    var inputs =  $("div#tab"+QuestionId +" .awnsersList").find($("input[type='checkbox']"));

    console.log("clicked" + QuestionId);

    var AnswerId = QuestionId+"_"+parseInt(inputs.length + 1);
    console.log(AnswerId);

    $("div#tab"+QuestionId +" .awnsersList").append("<div id='"+QuestionId+"_"+parseInt(inputs.length + 1)+"' <br/><input type='text' class='question' name='awnser["+QuestionId+"][]' placeholder='awnser'/>"+
    "<input type='checkbox' name='correct_awnser["+QuestionId+"][]' value='"+parseInt(inputs.length + 1)+"'/><button type='button' class='RemoveAwnser' >Remove awnser</button> <br/><br/></div>");
    window.awnserCount ++;
}


$('.RemoveAwnser').click(function() {
    $(this).prev().prev().remove();
    $(this).prev().remove();
    $(this).remove();
});

我想要实现的是，删除按钮按钮将移除其前面的2个输入以及它自身。我没有收到任何错误，所以我完全不知道我做错了什么。

请注意，您只会在动态创建的内容上获取一个删除按钮按钮，因为没有可能的错误的问题不是一个问题。

我确定我的大多数代码实际上非常糟糕但由于PHP将其全部放入我的数据库中而无法更改。

Answer 1

您可能想尝试一下。

$(this).closest().find(":checkbox").remove();
$(this).closest().find("input[type=text]").remove();

假设您要删除上次发布的答案。

如果您已经发布了当前的工作代码

，那会更好

修改

由于您提到动态生成内容。每当您想为动态生成的元素附加eny事件时，请始终使用on()函数。

试试这个： [假设函数内部的遍历顺序正确]

$('.RemoveAwnser').on('click',function() { $(this).prev().prev().remove(); $(this).prev().remove(); $(this).remove(); });

Jquery在当前元素之前删除动态元素

1 个答案: