Develop Reference

How to show container using jQuery and CSS

I am trying to build a smiley survey using only Front-End.
After hitting one of my radio buttons, the content should become visible for comments. My CSS is set up to display: none.
I have tried to do it using jQuery but nothing seems to be working.
Many thanks for your suggestions!
$("input[type='radio']").change(function(event) {
var id = $(this).data('id');
$('#' + id).addClass('face-cc').siblings().removeClass('none');
});
<div class="cc-selector row" id="moods">
<div class="col">
<input type="radio" type="radio" name="smile" value="angry" />
<label class="face-cc" for="angry">
<span class="far fa-angry" aria-hidden="div"></span>
</label>
<p>Terrible</p>
</div>
<div class="col">
<input type="radio" name="smile" value="grin-stars"/>
<label class="face-cc" for="grin-stars">
<span class="far fa-grin-stars" aria-hidden="div"></span>
</label>
<p>Excellent</p>
</div>
</div>
<div class="none" id="text">
<div class="container">
<form action="/action_page.php">
<div class="row p-5">
<div class="col-sm-12">
<div class="form-group shadow-textarea">
<label for="feedback">If you have any additional feedback,
please let us know below...
</label>
<textarea class="form-control p-2" id="comment" rows="7"
cols="20" placeholder="Comment here...">
</textarea>
</div>
<button type="submit" class="btn btn-danger">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

There are a few things incorrect with your approach. First is your use of the radio buttons in the HTML. For you to easily grab their individual click events and inspect their value, you want to add id attributes to them. I added some id's myself based on the radio button's name attribute that you already added.
Second, the jQuery which you used I changed completely to match thew use of the id attribute which I just added. This will look to see which radio button we just clicked on and if it matches the id of the radio button which will show the element, then we show the element accordingly.
You can also accomplish show/hide via CSS. I removed your CSS class of display: none; for the above to work, but you can keep it and use jQuery's toggleClass or addClass and removeClass using the above logic.
A few other comments. I simplified the logic by adding a ternary which you can read more on if you have not seen this syntax.
Last but not least is a quick search on StackOverflow can help, I found this answer which is the exact fix which you needed in your code from a jQuery perspective. I took the time to explain my approach here because you also needed HTML and CSS fixes to your approach.
If you think this answer helped, then feel free to 'accept' or 'mark up' the answer and welcome to Stack Overflow.
var text = $('#text');
var showId = 'grin-stars';
$('input[type="radio"]').click(function() {
$(this).attr('id') === showId ? text.show() : text.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cc-selector row" id="moods">
<div class="col">
<input id="angry" type="radio" name="radioBtn" value="angry" />
<label class="face-cc" for="angry">
<span class="far fa-angry" aria-hidden="div"></span>
</label>
<p>Terrible</p>
</div>
<div class="col">
<input id="grin-stars" type="radio" name="radioBtn" value="grin-stars"/>
<label class="face-cc" for="grin-stars">
<span class="far fa-grin-stars" aria-hidden="div"></span>
</label>
<p>Excellent</p>
</div>
</div>
<div id="text">
<div class="container">
<form action="/action_page.php">
<div class="row p-5">
<div class="col-sm-12">
<div class="form-group shadow-textarea">
<label for="feedback">
If you have any additional feedback, please let us know below...
</label>
<textarea class="form-control p-2" id="comment" rows="7"
cols="20" placeholder="Comment here...">
</textarea>
</div>
<button type="submit" class="btn btn-danger">
Submit
</button>
</div>
</div>
</form>
</div>
</div>

Better way to code rather than using whole new code with `insertAdjacentHTML`

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>

how to show form in the same page when click button on it

I have a form on the page and displayed it as none. And there is a button in the page I want when clicking on the button the form to display.
How can I do that?
<button type="button" class="btn btn-primary add-city">اضافه مدينة جديدة +</button>
and form code is this
<div id="forma">
<div class="form-head">
<p id="add-city">+اضافة المدينة</p>
<i class="fa fa-times-circle close" aria-hidden="true"></i>
</div>
<form class="">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>الدولة<span>*</span></label>
<select class="form-control">
<option>اختر الدوله </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(عربي)<span>*</span></label>
<input type="text" class="form-control" id="email">
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label>المحافظة<span>*</span></label>
<select class="form-control">
<option>اختر المحافظه </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(انجليزي)</label>
<input type="text" class="form-control" id="email">
</div>
</div>
</div>
</div>
</form>
<div class="form-footer">
<button type="button" class="btn btn-primary">ارسال</button>
<button type="button" class="btn btn-secondary">الغاء</button>
</div>
</div>
I made a div with an id called forma so that I can call it in javascript. But I don't know the right way.

You can add an onclick attribute to the button that changes the display to block.
onclick="document.getElementById('forma').style.display = 'block'"

Just use the jQuery click property and show property
$( "#idbutton" ).click(function() {
$("#idform").show();
});

If you are using Bootstrap.js, you can safely use jQuery because it's required. Assuming you should click #add-city button to display the form, simply add to your app.js or inside your <script> tags
$('#add-city').click(function() {
$('#forma').show();
});
In order to toggle the form (show/hide) on every click, you could do something like
$('#add-city').click(function() {
$('#forma').toggleClass('hidden');
});

How to get value from dynamic create input in Meteor?

I have created a custom form and added some jquery for dynamic inputs, but I can't get values from these generated inputs (Elements, Link, Image). Here are my form and code.
Template
This is my template for this form
<form id="workForm" class="workAdd">
<label>Title</label>
<input type="text" name="title" id="title" class="form-control">
<label>Live Link</label>
<input type="text" name="llink" id="llink" class="form-control">
<label>Elements Used In This Project</label>
<div class="row" id="eleContainer">
<div class="eleRow">
<div class="col s6 m6 l6">
<label>Element</label>
<input type="text" name="elements[]" id="elementsid[]" class="form-control">
</div>
<div class="col s6 m6 l6">
<label>Link</label>
<input type="text" name="elinks[]" id="elinksid[]" class="form-control" >
</div>
</div>
</div><!--row-->
<div class="row">
<div class="col s6 m12 center">
<a class="btn-floating waves-effect waves-light" id="addElements"><i class="fa fa-plus"></i></a>
</div>
</div>
<div class="row" id="imgContainer">
<div class="imgRow">
<label>Image</label>
<input type="text" name="image[]" id="imageid[]" class="form-control" >
</div>
</div>
<div class="row">
<div class="col s6 m12 center">
<a class="btn-floating waves-effect waves-light" id="addImages"><i class="fa fa-plus"></i></a>
</div>
</div>
<label>Detail</label>
<textarea id="detail" class="materialize-textarea" name="detail" data-length="120"></textarea>
<button type="submit" id="work-submit" thisId="" class="btn btn-primary">Submit</button>
Meteor
And this is my submit event I have created for this form.
Template.addworkTemp.events({
"submit .workAdd": function(event) {
var title = event.target.title.value;
var llink = event.target.llink.value;
var elements = event.target.elements.value;
var elinks = event.target.elinks.value;
var images = event.target.images.value;
var detail = event.target.detail.value;
return false;

There's a good tutorial on meteor forms that might be useful to you. This tutorial is based on blaze which is what you're using.
Firstly you can attach your handler to the form instead of to the workform class.
Template.addWorkTemp.events({
'submit form'(event) {
...
}
});
Then you should prevent the default form action:
Template.addWorkTemp.events({
'submit form'(event) {
event.preventDefault();
...
}
});
The event object has a target property which has properties for every field based on the name attached to them in the html.
Template.addWorkTemp.events({
'submit form'(event) {
event.preventDefault();
console.log(event.target.llink.value);
...
}
});
I have no idea why you're appending [] to the field names. I'm not sure those are valid in that context.
There's a related answer that shows how to access the form elements via the template object which is an optional second parameter to your event handler. That might also help you.
When I'm debugging things like this I normally set a breakpoint (using the browser's development tools) at the first line of the event handler then inspect the event to make sure I understand what's inside.

How to delete total div content using Javascript/Jquery

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