Question

var qBlock='<form id="resetblock"><div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" class="btn btn-purple closequest" style="position: absolute;top: 3px;"><span> <i class="fa  fa-close"></i></span></button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info"  placeholder="Add Your Comments"></textarea> </div></div></form>';
		
$("#addQuestion").on("click",function(){        
     $(qBlock).insertAfter(".qandaBlock");
});

$("#resetblock").on("click",'.closequest',  function(){ 
     alert("Do you really want to remove the question?!?");     
     $(this).closest(".newqandaBlock").remove();        
});

$("#resetblock").on("click",'.resetlatest',  function(){ 
     alert("Do you really want to reset the question?!?");     
      $(this).closest('form').find("input[type=text], textarea").val(""); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <form id="resetblock" name="resetblock" >	
                                             <div class="qandaBlock"> 
											  <div class="input-group margin-bottom-20"> 
												<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
												<input type="text" class="form-control" placeholder="Question Asked ">
											</div>
											<div class="input-group margin-bottom-20"> 
												<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
												<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> 
										    </div>
											<div class="input-group margin-bottom-20">
											<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
											<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div>
											</div>
					                        <button type="button" class="btn btn-default resetlatest" id="resetlatest" ">Reset</button>&nbsp;
							                <button type="button" class="btn btn-purple" id="addQuestion"><i class="fa  fa-plus-square-o"></i>&nbsp;Add Another Question</button>
                        </div>
                      </form>
  </body>
</html>

上面的代码行将重置整个表单。但是，如何仅重置最后一个新插入的问题，答案和评论块。我不想点击重置按钮，整个表格要重置。我只想重置最后一个新插入的块，以便在点击重置按钮时用空白清除它的字段。

Answer 1

类似这样的事：http://jsfiddle.net/swm53ran/25/

要获得最后一个或新插入的元素，我使用了jquery＆＃39; s：last-child选择器，如下所示。

使用.clone（）也比使用javascript构建html更好（也更易于维护）。

<div class="content">
    <div id="template" class="section">
        <input class="question" type="text" />
        <br/>
        <textarea class="answer"></textarea>
        <br/>
        <textarea class="comments"></textarea>
    </div>
</div>
<br/>
<br/>
<a href="#" class="reset" style="margin-right:10px;">Reset Last Question</a>
<a href="#" class="add">Add Another Question</a>

$('.add').on('click', function() {
    var clone = $('#template').clone(true).attr('id', '');
    clone.find('.question').val('');
    clone.find('.answer').val('');
    clone.find('.comments').val('');
    clone.appendTo('.content');
});

$('.reset').on('click', function() {
    console.log($('.section').length);
    var last = $('.content .section:last-child');
    last.find('.question').val('');
    last.find('.answer').val('');
    last.find('.comments').val('');

});

Answer 2

要改变的一些事情，除了标记：

1）停止表格相互嵌套，并在其他表格之后将新表格放在底部：

$("#addQuestion").on("click",function(){        
     $(qBlock).insertAfter(".qandaBlock");
});

到

$("#addQuestion").on("click",function(){        
     $('body').append(qBlock); // Append the form to the body, so it will sit after the last form
});

2）从标记和JS

中删除所有id="resetblock"

3）将所有$("#resetblock").on("click"更改为$(document).on("click"

4）将alert改为confirm：

var blnReset = confirm("Do you want to reset the question?");
if (blnReset == true) {
   //Reset the question
}

想要仅重置按钮上的最后一个新插入的动态块

2 个答案: