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 входа Infront его вместе с собой , Я не получаю никаких ошибок, поэтому я абсолютно не знаю, что я делаю неправильно.

Обратите внимание, что вы получите только кнопку «Удалить тент» на динамически созданный контент, потому что вопрос без возможных айнсеров не вызывает большого сомнения.

Я уверен, что большая часть моего кода на самом деле очень дерьмовая, но не может быть изменена из-за того, что PHP помещает все это в мою базу данных.

Answer 1

Возможно, вы захотите попробовать это.

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

Предполагая, что вы хотите удалить последний ответ.

Было бы лучше, если бы вы разместили свой текущий рабочий код

EDIT

Поскольку вы упомянули, что содержимое динамически генерируется. Всякий раз, когда вы хотите присоединить события eny для динамически генерируемых элементов, всегда используйте функцию on().

Попробуйте это: [Предполагая, что порядок обхода внутри функции правильно]

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