jquery刪除當前元素之前的動態元素

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

我想要實現的是，刪除awnser按鈕將刪除2個輸入盈它與它自身一起。我沒有得到任何錯誤，所以我完全不知道我做錯了什麼。

請注意，您只會在動態創建的內容上得到一個刪除awnser按鈕，因爲沒有可能的awnsers的問題不是什麼大問題。

我敢肯定，我的大部分代碼實際上非常糟糕，但不能改變，因爲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(); 
});