Develop Reference

how to enable and disable link by click button using jquery

<script type="text/javascript">
$(document).ready(function(){
`$('#button1').click(function(){
$("a").removeAttr('href');
}
});
});
</script>`
link`
<input id="button1" type="button" class="add" value="Click to remove the link!" />

You can add a class with pointer-events:none
$(document).ready(function() {
$('#button1').click(function() {
$("a").toggleClass('disable');
});
});
.disable {
pointer-events: none;
cursor: no-drop;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Link
<button id='button1'>Click</button>

You can just toggle the application of the pointer-events:none; style using JQuery's .toggleClass() method.
$(document).ready(function(){
$("#toggle").on("click", function(event){
$("a").toggleClass("disable");
});
});
/* When applied to an element, the element doesn't respond to mouse actions */
.disable { pointer-events:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Example.com
<input type="button" id="toggle" value="Enable/Disable Link">
But, if you are asking how to remove the link altogether, then you would use the .remove() method:
$(document).ready(function(){
$("#btnRemove").on("click", function(){
$("a").remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Example.com
<input id="btnRemove" type="button" value="Click to remove the link!">

jQuery .height() not changing

I have this code:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').height('auto');
});
});
Which changes the height of a div on a link click. I have put an alert inside this function and can confirm it's being ran when the link it clicked, only the height of the target div isn't changing. The target div has a height of 0 set in the CSS file to begin with but it's not being updated.
Does anyone have any idea what may be going on here?

Try this:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').css('height','auto');
});
});

See how changing the height of an element works:
.test{
margin:10px;
border-style:solid;
border-width:1px;
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="height:10px" onclick="$('.test').css('height','10px');">
<input type="button" value="height:auto" onclick="$('.test').css('height','auto');">
<input type="button" value="height:0px" onclick="$('.test').css('height','0px');">
<input type="button" value="hide" onclick="$('.test').hide();">
<input type="button" value="show" onclick="$('.test').show();">
<div class="test">test</br>test test</br>test</br>test</br></div>

you can also try this:
$(function() {
$('#team-ch').click(function() {
$('#team-camb-hert').attr('style','height:auto');
});
});

Please put your script code below the jQuery library and run again as shown below,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto');});});

Change CSS "display: none;" to shown

I want an element on my website hidden when the website loads, but when a user submits a form, then it changes to show. I have tried for hours now, can't get it to work.
Code:
HTML
<form onsubmit="show();">
<div id="mymessage" class="hidden">Message was sent.</div>
CSS
.hidden {
display: none;
}
JavaScript
function show () {
document.getElementById("mymessage").style.display = 'block';
}
Disclaimer: I only included relevant code.
Hope somebody is able to help me/spot the error!

You have to return false to prevent the browser from refreshing the page so that you can hide the element on submit:
function show () {
document.getElementById("mymessage").style.display = 'block';
return false;
}
.hidden {
display: none;
}
<form onsubmit="return show();">
<button>enviar</button>
</form>
<div id="mymessage" class="hidden">Message was sent.</div>

I would remove the hidden class:
function show () {
document.getElementById("mymessage").classList.remove("hidden");
}
(classList has very broad support, and can be polyfilled on obsolete browsers if necessary.)
Live Example (using a button click instead of a form submit):
function show () {
document.getElementById("mymessage").classList.remove("hidden");
return false;
}
.hidden {
display: none;
}
<form>
<div id="mymessage" class="hidden">Message was sent.</div>
<input type="button" onclick="show();" value="Click Me">

i think this is a solution
document.getElementById("mymessage").classList.remove("hidden");

What about if you use jQuery instead?
</script>
<script>
$(document).ready(function(){
$("form").submit(function(){
jQuery('#mymessage').show();
});
});
</script>
Remember to add the library above the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

Toggle hide and show

I have tried everything to get it to toggle show and hide but every time I add hide in the function, it stops working or I can get hide to work flawlessly while show doesn't work at all. Any help would be appreciated.
<div class="ShowHideClicker clear" >
<img src="something.gif"></div> <div class="ShowHideList">
<div class="ui-widget" id="SearchBar">
<label for="tags">Search:</label>
<input id="tags">
<button class='clear' id="ClearButton"> Clear</button>
</div>
<div id="Result"></div>
</div>
$(document).ready(function(){
$('.ShowHideList').hide();
$('.ShowHideClicker').click(function(){
$(this).next().show('drop', {direction: 'left'}, 1000);
});
});

Here is the simple solution with toggleClass:
$('.ShowHideClicker').on('click', function(){
$(this).next().toggleClass('hidden');
});
http://jsfiddle.net/LcYLY/

You should be using the .toggle() this way: JSFIDDLE and make sure you have included jQuery and jQuery UI in your header ("drop" is a jQuery UI feature)
jQuery:
$(document).ready(function(){
$('.ShowHideClicker').click(function(){
$('.ShowHideList').toggle('drop', 1000);
});
});
CSS:
.ShowHideList { display: none; }

How to remove inline style from img tag using JQuery?

I have tried everything to remove the inline style from <img> tags in a page. And nothing has worked.
Given rendered html like:
<p><img alt="" src="../../../../images/Cuffs.jpg" style="width: 620px; height: 395px;" /></p>
How can I remove the <style> attribute from all images in page? I have tried removeAttr as well as code from various SO posts and nothing has worked.
EDIT:
I tried
<script>
$(document).ready(function ($) {
$('img').each(function () {
$(this).removeAttr('style')
});
});
</script>
And:
<script>
$(document).ready(function ($) {
$('img').removeAttr("style")
});
</script>
And
<script>
$(document).ready(function ($) {
$('img').attr('style', '');
});
</script>
As well as about 3 or 4 other examples from around the web.
When I view source I see:
<p><img alt="" src="../../../../images/Cuffs.jpg" style="width: 620px; height: 395px;" /</p>
Checking in Chrome

Your first try works perfectly:
$(document).ready(function ($) {
$('img').each(function () {
$(this).removeAttr('style')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<p>
<img alt="" src="http://lorempixel.com/32/32" style="width: 620px; height: 395px;" />
</p>

$().removeAttr('style'); works in Safari, Chrome and Firefox (all latest). Not sure on IE, but it certainly should.
$(function() {
$('img').removeAttr("style");
});
See this jsBin: http://jsbin.com/yokaxo/1/

Use the .removeAttr() method (documentation).

In my case the images had their 'height' and 'width' attributes set, so instead of targeting the 'style' attribute, you may need to do this:
$('img').each(function ()
{
$(this).removeAttr('width');
$(this).removeAttr('height');
});
Of course you could also remove the style attribute too for completeness, but that's up to you.
$('img').each(function ()
{
$(this).removeAttr('width');
$(this).removeAttr('height');
$(this).removeAttr('style');
});
Anyway, hope it helps someone.