We Keep Coding

How to change an empty star glyphicon button to star glyphicon button onclick with JS?

This seems to change the glyphicon only when I click glyphicon itself. I want it to change when I click the button.
<script>
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-star-empty glyphicon-star');
});
</script>
<button class="btn btn-default">
<span class="glyphicon glyphicon-star-empty"></span>
</button>

You can use this jQuery code.
$(document).ready( function() {
$('.btn').click(function(){
$(this).find('.glyphicon').toggleClass('glyphicon-star-empty glyphicon-star');
});
})
You have to bind the event on the button, not only the icon, else it will be triggered only clicking the star.

how to delete element when click on button only not on all div

how to delete element when press on delete button?
but what happened here when i press any where in div the div will delete
i am trying to delete using button only
<script>
function myexfun(mySelectID, selectedItem, myDIVId) {
var x = document.getElementById(mySelectID).value;
$('#parentcur').append('<div id="childcur" class="row mg-l-20 mg-t-40 mg-lg-t-0 "><div class="col-lg-3 mg-t-40 mg-lg-t-0"><label class="rdiobox rdiobox-primary"><input name="rdio" type="radio" checked="" id="rdcur"><span id="selectedItemcur" class="mg-l-20 mg-t-40">' + x + '</span></label></div><div class=" mg-t-40 mg-l-auto mg-lg-t-0"><button class="btn btn-danger btn-sm mg-r-20 mg-t-5 rm" type="button" value="Delete" id="bdd"onClick="delelm()" title="Delete Row"><span class="icon ion-trash-a"></span> Delete</button></div></div>');
// bd.style.display = "block";
}
</script>
<script>
function delelm() {
$(document).on("click", '#childcur', function() {
$(this).remove();
});
}
</script>
i tried alot but i can not delete it from button just click on div

Your click event listener is attached to the entire div, which is why it deletes whenever you click anywhere inside the div. Since you have delelm(), you can modify the code as below to confine the click to just the delete button alone.
$('#parentcur').append('<div id="childcur" class="row mg-l-20 mg-t-40 mg-lg-t-0 "><div class="col-lg-3 mg-t-40 mg-lg-t-0"><label class="rdiobox rdiobox-primary"><input name="rdio" type="radio" checked="" id="rdcur"><span id="selectedItemcur" class="mg-l-20 mg-t-40">1</span></label></div><div class=" mg-t-40 mg-l-auto mg-lg-t-0"><button class="btn btn-danger btn-sm mg-r-20 mg-t-5 rm" type="button" value="Delete" id="bdd"onClick="delelm(this)" title="Delete Row"><span class="icon ion-trash-a"></span> Delete</button></div></div>');
function delelm(el) {
$(el).closest('#childcur').remove();
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div id="parentcur"></div>

Your problem is that you're targeting clicks on the #childcur div and not it's children.
Here's an example of how this could be done:
HTML:
<div id="container">
<div class="deletable">
<p>A</p>
<button class="do-delete">Delete</button>
</div>
<div class="deletable">
<p>B</p>
<button class="do-delete">Delete</button>
</div>
<div class="deletable">
<p>C</p>
<button class="do-delete">Delete</button>
</div>
</div>
JS:
// target buttons within the divs we want to be deletable.
$('div.deletable > button.do-delete').on('click', function() {
// when the button is clicked, access the parent and remove it from the DOM.
$(this).parent().remove();
})
Here's a fiddle: https://jsfiddle.net/7aro46et/

Why I can apply JS/Jquery function to a button specific ID, but can't link to his class?

I'm trying to apply a function when a button is pressed, but sometimes the button is appended, so I tried to apply the function to his class. The problem is that I can only make the function work when I link it to the button ID, when I link the class nothing happens. This happens to the button that is appended and to the normal button as well.
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control" id="createCustomLayer" class="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>
If I change the .createCustomLayer for #createCustomLayer, all works fine.

You can't have multiple class="" move createCustomLayer into class="btn btn-light form-control", so it looks like class="btn btn-light form-control createCustomLayer"
Demo
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>

This is because you have more than one class attribute in the element. If you have multiple class attribute in the same element then except the first one all are simply ignored:
$(document).on('click', '.createCustomLayer', function () {
alert("Alert");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-light form-control createCustomLayer" id="createCustomLayer" style="margin-top: 32px;">Create a custom layer</button>

Bootstrap alert JS won't slide down

Using this JS:
$('#comment').click(function(e) {
e.preventDefault();
$('#comment').slideDown();
});
}
And this html code:
<div id="comment" class="alert alert-info" style="margin-top: 20px; display: none;"></div>
<button type="button" class="btn btn-default btn-sm" id="route_update">Edit</button>
it should, if successful, slide down with the message...But it don't, the blue bar won't go down.

Try this code:
$('#route_update').click(function() {
$('#comment').slideDown();
});
Explanation:
Your jQuery requires the hidden element to be clicked in order to show the alert. This won't work.
Using the 'Edit' button's ID to call the function works.

Bootstrap popover on injected html button

I have injected a button like this:
$(panelBody).append('<input type="button" id="pink" class="btn btn-success btn-sm" value="SWIFT" /> ');
but can't get a Bootstrap 3.0 Popover to render next to it when I click. Tried this inside $document.ready():
$(document).on('popover', '#pink', function(e){
e.preventDefault();
//console.log('clonk');
});
but nothing. Any ideas?

You can now use the selector option when creating dynamic popovers:
$(panelBody).append('<input type="button" id="pink" class="btn btn-success btn-sm" value="SWIFT" rel="popover" title="A Title" data-content="This is the content of the popover" />');
$('body').popover({
selector: '[rel=popover]'
});
$(document).on('show.bs.popover', function(e) {
console.log('clonk');
});
Fiddle here