this is my code for first element, inside of first dynamic form
<input type="text" class=" form-control" id="pPilihan" style="font-size: 1rem;" name="p_pilihan[]" required placeholder="Masukan Nama Pilihan, contoh: Merah / XL">
Tambah
this is my code for add input element
<div class="copy d-none">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" class="form-control" id="pPilihan" style="font-size: 1rem;" name="p_pilihan[]" required placeholder="Masukan Nama Pilihan, contoh: Merah / XL">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Hapus</button>
</div>
</div>
</div>
and this is my js
$(document).ready(function() {
$("body").on("click", ".add-more", function(){
var html = $(".copy").html();
$(".after-add-more").before(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
The question is not clear to me but I can see a bug in your code, you simply can't have two elements having the same id. Each time 'add more' button is clicked the input element with id="pPilihan" is getting repeated, which is wrong. You can solve this by using a counter to produce a dynamic id (if you need one).
Related
I am trying to add new input and button when clicking certain button.
<div class="form-group row">
<label>...</label>
<div class="col-sm-9 input-group" id="aa">
<input class="form-control mr-2" id="bbb" name="bbb" required type="text">
<div class="input-group-append">
<button type="button" class="btn btn-block btn-outline-info float-right" onclick="add()">Add</button>
</div>
</div>
</div>
Here is my question.
By clicking on button, I want to add same input and button under input(id="aa"). And every time when clicking on new button I want to add new input and button again.
I tried to solve by using insertAdjacentHTML. But this requires long whole new code. So wondering if there is more simple way to add new input and button.
※ Code I am trying to add
<div class="col-sm-9 input-group" id="aa">
<input class="form-control mr-2" id="bbb" name="bbb" required type="text">
<div class="input-group-append">
<button type="button" class="btn btn-block btn-outline-info float-right" onclick="add()">Add</button>
</div>
</div>
Next I am trying to change adding button to delete button when new input and button is clicked. Can use remove method. But I need each id of new input and button. So wondering if there is specific way to assign different id to new input and button every time I add one?
Hope someone can show me at least where I can refer to.
Don't use the ID, use relative addressing, parentNode, closest etc. And use cloneNode to get the stuff you want to duplicate
Note, you do need "new long code" for this
window.addEventListener("load",function() {
document.addEventListener("click",function(e) { // delegation
var elem = e.target;
if (elem.className.indexOf("btn") == 0) {
var div = elem.closest("div.form-group");
if (elem.innerText=="Add") {
var newDiv = div.cloneNode(true); // deep cloning
newDiv.querySelector(".btn").innerText="Del";
// here you may want to rename the input field too
div.parentNode.appendChild(newDiv);
}
else {
div.parentNode.removeChild(div);
}
}
});
});
<div class="form-group row">
<label>...</label>
<div class="col-sm-9 input-group">
<input class="form-control mr-2" name="bbb" required type="text">
<div class="input-group-append">
<button type="button" class="btn btn-block btn-outline-info float-right">Add</button>
</div>
</div>
</div>
I have a one text box search, and one button,when i add the text and click button, related data will be getting but when i click another search.that is taking same id,previous id not clearing. how to clear that id
<div class="col-lg-4 col-sm-4 col-xs-12">
<i class="glyphicon glyphicon-search"></i>
<div class="form-group">
<input type="text" class="form-control" id="isbncollegeid" data-ng-model="isbncollege" placeholder=" Search By college ISBN" name="isbncollegeid">
</div>
</div>
<div class="col-sm-4">
<br />
<div class="form-group">
<input type="hidden" id="bookcollgeIsbn" name="bookcollgeIsbn" />
<button type="button" class="btn btn-sky" id="IsbntcolDetails" data-ng-disabled="LibraryIsbnForm.$invalid" data-ng-click="DetailscolByISBN()">Get Details<i class="fa fa-exclamation"></i>
</button>
<button type="button" class="btn btn-sky" id="clear" data-ng-click="ClearISbnCollege()">Clear<i class="fa fa-exclamation"></i>
</button>
</div>
</div>
In your ClearISbnCollege just make isbncollege model empty
$scope.ClearISbnCollege = function() {
$scope.isbncollege = "";
}
When you will click the Clear button, input will be emptied.
You can use below line of code after getting results in javascript:
document.getElementById('elementid').value = "";
in Jquery:
$('#elementid').val("");
I need to delete the last textarea in a div.
<div id="container">
<!-- question 1st box starts here -->
<div class="col-md-4">
<div class="questionparts">
<div class="form-group">
<label for="title">Questions</label>
<textarea class="form-control" name="questions0" id="questions0" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea>
</div>
<div class="clear"></div>
<div class="questionshowp">
<h4 class="page-title">Multiple Choice</h4>
<h6>Your audience can select from these answers:</h6>
<div class="form-group">
<input name="questions1" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success" style="line-height:12px;"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger" style="line-height:12px;"><i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- question 1st box end here -->
<!-- question 2nd box starts here -->
<div class="col-md-4">
<div class="questionparts">
<div class="form-group">
<label for="title">Questions</label>
<textarea class="form-control" name="questions0" id="questions0" placeholder="Questions" style="background:#FFFFFF;" rows="2"></textarea>
</div>
<div class="clear"></div>
<div class="questionshowp">
<h4 class="page-title">Multiple Choice</h4>
<h6>Your audience can select from these answers:</h6>
<div class="form-group">
<input name="questions1" id="questions1" class="form-control firstsec" placeholder="Text, Image URL, or LaTeX" value="" type="text">
<div class="secondsec">
<button type="button" class="btn btn-sm btn-success" style="line-height:12px;"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm btn-danger" style="line-height:12px;"><i class="fa fa-minus" aria-hidden="true"></i></button>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- question 2nd box end here -->
</div>
Here I need to delete the last textarea ('in this case 2nd box') always. Check javascript below.
function deleteQuestionField(){
var textareas = $('#container textarea');
console.log('hii',textareas);
if (textareas.length !== 0) {
textareas.last().remove();
}
}
This function is called from a button click event but its not deleting the last textarea.
Simply use jQuery's .remove() (see here for more info):
Give your div that you want to remove a unique id and then call it:
HTML:
....
<!-- question 2nd box starts here -->
<div class="col-md-4" id="someUniqueId">
....
Javascript:
function deleteQuestionField(){
var textareas = $('#container textarea');
console.log('hii',textareas);
if (textareas.length !== 0) {
$("#someUniqueId").remove(); //This will remove the unique id element
}
}
You have the html() function in jQuery
http://api.jquery.com/html/ to remove all codes between an element
The remove() function you used delete the selected element
If you want to delete the content of the textarea, try to use the val() function instead.http://api.jquery.com/val/
$('textarea').val('');
If I understand it correctly if the first textarea is not empty you want to remove the second 'box' . If this is the case you should select the first textarea and not textarea in general (I assume)
firstly add an ID to the second div <div class="col-md-4" id="remove_this"> and call the ID in the remove function
So probably it would be something like:
function deleteQuestionField(){
var textareas = $('#questions0'); //if you want general just use textarea ( `$('#container textarea');`)
console.log('hii',textareas);
if (textareas.length !== 0) {
$("#remove_this").remove();
}
}
Documentation about the .remove function HERE
You want to delete total div ,but you are making delete only textarea element
textareas.last().remove();
//change above code to like below ,it will delete the whole div
$(".col-md-4").last().remove();
With Jquery
$("#item_id").empty();
It works
I want to remove a dynamically generated div using jquery, remove button will be with every div. So when I click any remove button, it will remove that div from DOM.
<div class="form-group" id="drag">
<div class="col-md-2">
<input type="text" class="form-control" id="name1" placeholder="Name">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="eng1" placeholder="Description Eng">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="ar1" placeholder="Description Ar">
</div>
<div class="col-md-2">
<a id="remove" href="javascript:;" class="btn btn-sm red">
Remove
<i class="fa fa-close"></i>
</a>
</div>
</div>
If you would generate a div with inside the div a button, you can add the following function to let that button make the parent div disappear:
function removeParent()
{
//remove button click, remove the parent div from the dom
$(this).parent().parent().remove();
//in your specific case you want the parent parent div to be removed since the button is encapsulated by 2 divs.
}
This function you then need to add to the onclick listener of the button. Either by just setting it in the html onclick='removeParent()' or using javascript:
//gerenate div + button
mybutton.addEventListener('click', removeParent, false);
$('body').on('click', '#remove', function(){
$(this).closest('.form-group').remove();
});
But it's not correct to have more than one elements with the same id. recomment you to change ID to class
Try like below. Use class remove instead of id, because id should be unique.
$('body').on('click', '.remove', function(){
$(this).closest('.form-group').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="drag">
<div class="col-md-2">
<input type="text" class="form-control" id="name1" placeholder="Name">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="eng1" placeholder="Description Eng">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="ar1" placeholder="Description Ar">
</div>
<div class="col-md-2">
<a class="remove" href="javascript:;" class="btn btn-sm red">
Remove
<i class="fa fa-close"></i>
</a>
</div>
</div>
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>
<button type="button" class="btn btn-purple" id="addQuestion"><i class="fa fa-plus-square-o"></i> Add Another Question</button>
</div>
</form>
</body>
</html>
The above line of code will reset the whole form. But , How to reset only the last newly inserted block of question , answer and comment. I dont want on the click of the reset button, the whole form to be reset. I only want to reset the last newly inserted block to be clear its fields with blanks on the click of reset button.
something like this: http://jsfiddle.net/swm53ran/25/
to achieve getting the last or newly inserted element, i used jquery's :last-child selector as seen below.
its also better (and more maintainable) to use .clone() than it is to build html with javascript if you have a template.
<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/>
Reset Last Question
Add Another Question
$('.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('');
});
A few things to change, other than the sh**ty markup:
1) Stop the forms from nesting each other and put the new form at the bottom after other forms:
$("#addQuestion").on("click",function(){
$(qBlock).insertAfter(".qandaBlock");
});
to
$("#addQuestion").on("click",function(){
$('body').append(qBlock); // Append the form to the body, so it will sit after the last form
});
2) Remove all id="resetblock", from markup and from the JS
3) Change all $("#resetblock").on("click" to $(document).on("click"
4) Change the alert's to confirm's:
var blnReset = confirm("Do you want to reset the question?");
if (blnReset == true) {
//Reset the question
}