html - Jquery remove dynamic element before current element -

so i'm building quiz, , i'm adding questions , answers jquery. want remove questions , answers.

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

what i'm trying achieve remove awnser button remove 2 inputs infront of along itself. i'm not getting errors have absolutely no idea i'm doing wrong.

note remove awnser button on dynamic created content because question no possible awnsers not of question.

i'm sure of code crappy cannot changed due php thats putting in database.

you might want try out.

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

assuming want remove last posted answer.

it have been better if have posted current working code

edit

since mentioned contents dynamically being generated. whenever want attach eny events dynamically generated elements use on() function.

try this:[assuming traversal order inside function correct]

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