We Keep Coding

jquery css backgroud color not working

I am trying to change the background of selected href , which is not
working for me. i can see selected href in console log. Can someone
help me understand if i am missing anything in my code ?
Below is my code:
-----------------
<style>
.current {
background-color: tomato;
}
</style>
function getwlan() {
$.ajax({
url: '/getwlan',
data: $('form').serialize(),
type: 'POST',
success: function(response){
var wlan = JSON.parse(response);
var options = "";
var row = $('<tr>');
var zone="<b>System Zones</b>";
for (var i = 0; i < wlan.length; i++) {
if (wlan[i].wlan_zone){
z1=new Array (wlan[i].wlan_zone)
zone += "<h5>"+ z1 + "</h5>";
}
}
$("#divzone").html(zone);
$('#divzone a').on('click', function(event) {
event.preventDefault();
var v=($(this).attr('href'));
var s1= sessionStorage.setItem('zones', v);
var s2=sessionStorage.getItem("zones");
console.log(v)
$(this).addClass('current');
var section_id = $(this).attr('href');
var section_color = $(section_id).css('background-color');
$(this).css('background-color', section_color);
'

Follow this example this is relavent to your question :
$('#divzone a').on('click', function(event) {
event.preventDefault();
$('#divzone a').removeClass('current');
$(this).addClass('current');
});
.current {
background-color: tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='divzone'>
<a class='link'>href</a>
<a class='link'>href</a>
<a class='link'>href</a>
<a class='link'>href</a>
<a class='link'>href</a>
<a class='link'>href</a>
<a class='link'>href</a>
</div>

Change the link background based on the clicked link with color of section id that contain in href attribute of clicked link.
$('a').click(function(){
$('a').css('background-color','');
var sectionId = $(this).attr('href');
var backgroundColor = $(sectionId).css('background-color');
$(this).css('background-color', backgroundColor);
})
a{
padding: 10px;
margin-bottom: 10px;
}
div{
height: 100px;
}
#sectionID1 {
background-color: #337ab7;
}
#sectionID2 {
background-color: #ffcc00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Section 1
section 2
<div id="sectionID1">
Section 1
</div>
<div id="sectionID2">
Section 2
</div>

Try to add !important on .current background-color to override any other same / more important declarations.
.current {
background-color: tomato !important;
}
Or this
#divzone a.current {
background-color: tomato !important;
}

Jquery Drag to Delete

I am currently playing with some jquery and as i tried to create a simple todo-list I came across a problem.
So far the goal is to be able to add paragraphs by clicking the green square and remove them by clicking it once and then dragging it to the red square.
Everything works out fine except the deleting of the dragged paragraph.
Right now it only works by removing the whole class but I want to only delete the dragged one.
Here the code: https://codepen.io/anon/pen/OXXXpY
jQuery:
$(document).ready(function() {
var send = $("#send");
var dlt = $("#delete");
send.click(function() {
var input = $("input").val();
$("#container").prepend("<p class='entry'>" + input + "</p>");
});
$(document).on("click", ".entry", function() {
$(this).draggable();
$("#delete").droppable({
drop: function() {$(".entry").remove();}
});
});
});
Please don't mind my English and the real use of this project. This is just an jQuery experiment.

Use $(this) to target the dragged element
$(document).on("click", ".entry", function() {
var $this = $(this);
$(this).draggable();
$("#delete").droppable({
drop: function() {
$($this).remove();
}
});
});
$(document).ready(function() {
var send = $("#send");
var dlt = $("#delete");
send.click(function() {
var input = $("input").val();
$("#container").prepend("<p class='entry'>" + input + "</p>");
});
$(document).on("click", ".entry", function() {
var $this = $(this);
$(this).draggable();
$("#delete").droppable({
drop: function() { $($this).remove(); }
});
});
});
body {
text-align: center;
}
h1 {
font-family: Helvetica;
}
form input {
width: 500px;
font-size: 30px;
}
form input:focus {
outline: none;
}
.inline {
display: inline-block;
}
#send {
width: 40px;
height: 40px;
background-color: green;
}
#delete {
width: 40px;
height: 40px;
background-color: red;
}
.entry {
font-family: helvetica;
border: solid 1px grey;
-webkit-user-select: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<h1>ToDo</h1>
<form class="">
<div class="inline" id="delete"></div>
<input type="text" name="input" value="">
<div class="inline" id="send"></div>
</form>
<div id="container"></div>

How to delete element onclick

Playing with JavaScript, I have a search function which gets information from a database and then uses JavaScript to add the elements to my site in a box with a cross near the element. I am trying to make it so that when the user presses the X, near the element, they can remove it, if they made a mistake.
$('#addButton').on('click', function(event) {
var searchedValue = $('#search_term').val();
var divHolder = $('.selectedStuff');
$("<div>" + searchedValue + "</div>").css({
'background-color': 'yellow',
'width': '700px',
'margin-top': '10px',
'border-style': 'solid',
'border-color': '#0000ff'
}).appendTo(divHolder);
So, I tried certain methods, but I cant seem to get it to work. I have commented out the bit. Again, it's just when the user clicks on the X that element will be deleted.

You need to change your html because you can't bind click event with "::after" as it's is not html element. So rather then adding css on "::after" add span in place of that and apply CSS on it.
$(document).ready(function() {
$('.searchFunction').keyup(function(event) {
var search_term = $("#search_term").val();
$.post(document.location.href, {
search_term: search_term
}, function(data) {
$('.result').html(data);
});
});
$('.result').on('click', 'li', function(event) {
var result_value = $(this).text();
$('#search_term').val(result_value);
$('.result').html('');
});
$('#addButton').on('click', function(event) {
var searchedValue = $('#search_term').val();
var divHolder = $('.selectedStuff');
$("<div>" + searchedValue + "<span>X</span></div>").css({
'background-color': 'yellow',
'width': '700px',
'margin-top': '10px',
'border-style': 'solid',
'border-color': '#0000ff'
}).appendTo(divHolder);
$('.selectedStuff span').on("click", function(){
$(this).closest("div").remove();
});
});
});
.selectedStuff > div {
width: 300px;
}
.selectedStuff span {
font-family: Arial;
color: red;
position: relative;
float: right;
right: -20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name='search_term' id="search_term" class="searchFunction">
<input id="addButton" type="button" value="Add">
<div class="dropdown">
<ul class="result"></ul>
</div>
<div class="selectedStuff"></div>
<div id="markx"></div>

Based on your information I suggest you need use remove method:
$('.selectedStuff > div:after').on("click", function() {
$(element_to_delete).remove();
}

$('.selectedStuff > div:after').on("click", function() {
$(this).remove();
}

Check this answer: Only detect click event on pseudo-element
TL;DR You can't bind an event on pseudo-element, just insert x to the DOM (e.g. as a div) and bind event on it.

Add the x into another position, because you cannot detect events in pseudo-elements like :after.
X is put in the preferred position via css
Result: jsfiddle
$('#addButton').on('click', function( event ) {
var searchedValue = $('#search_term').val();
var divHolder = $('.selectedStuff');
$("<div ><div class='bar'>" + searchedValue + "</div><div class=\"close\">X</span></div>").css({
}).appendTo(divHolder);
$('.close').on("click", function() {
$(this).parent().remove();
});
});
});
.selectedStuff > div{
width:500px;
display: table-row;
}
.close{
display: table-cell;
font-family: Arial;
color: red;
position:relative;
right:-20px;
}
.bar{
background-color: yellow;
width: 400px;
margin-top: 10px;
border-style: solid;
border-color: #0000ff;
display: table-cell;
}

Why does replaceWith cancels calls to its variable?

I'm trying to clone dom elements and change their tags. But after I replace the main element I cannot change its children nor apply some click events.
I commented line after which it stops working.
Thanks for help!
http://codepen.io/sanns/pen/eJvzBN?editors=101
var selectDom = $('select');
selectDom.each(function() {
var clone = $(this).clone().insertAfter(this);
//take classes from clone
var classesStr = clone.attr('class');
clone = clone.replaceWith(function(index, oldHTML) {
return $('<div class="custom-select ' + classesStr + '">').html(oldHTML);
});
//why does not work?
clone.find('option').replaceWith(function(index, oldHTML) {
return $('<li>').html(oldHTML);
});
clone.wrapInner('<ul class="scrollbox"></ul>').prepend('<span class="shower"> Выберитеtttttttttteeeee тратататататат</span>');
//BEHAVIOR SELECT
clone.on('click', function() {
alert('asdf');
});
});

Actually .replaceWith() returns the original jQuery object, not the replacement with something.
You can find more details : http://api.jquery.com/replacewith/
Here is the small example of it:
$( "button" ).click(function() {
$( this ).replaceWith( "<div>" + $( this ).text() + "</div>" );
});
button {
display: block;
margin: 3px;
color: red;
width: 200px;
}
div {
color: red;
border: 2px solid blue;
width: 200px;
margin: 3px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>First</button>
<button>Second</button>
<button>Third</button>

Jquery output link's alt on hover

I am trying to output the link's "alt" on hover. (Text is showing up in #container div).
This is what i have been trying so far (it doesnt work):
If you have any better ideas, please suggest.
HTML
<div>Icon</div>
<div>Icon</div>
<div>Icon</div>
<div>Icon</div>
<div id="container"></div>
JS:
$('.container').hover(function() {
var hero = $(this).attr('alt');
$('#container').text(hero);
}, function() {
$('#container').text("");
});
JSFIDDLE: http://jsfiddle.net/XDky6/

$('.heroes').hover(function() {
var hero = $(this).attr('alt');
$('#container').text(hero);
}, function() {
$('#container').text("");
});
hover should be called on $('.heroes'), not $('.container').

You misstyped your code.
You are reffering to the wrong class.
It should be .heroes but it's .container.
Fixed code :
$('.heroes').hover(function() {
var hero = $(this).attr('alt');
$('#container').text(hero);
}, function() {
$('#container').text("");
});

$('.heroes').hover(
function() {
var hero = $(this).attr('alt');
$('#container').text(hero);
},
function() {
$('#container').text("");}
});

Working demo http://jsfiddle.net/RdSCV/1/
Wrong class was passed i.e. correct class is .heroes
code
$('.heroes').hover(function() {
var hero = $(this).attr('alt');
$('#container').text(hero);
}, function() {
$('#container').text("");
});​

If you can accept the alt text appearing next to the link, then:
<style>
a:hover:after {
content: attr(alt);
position: absolute;
background: #fff;
padding: 2px;
border: 1px solid #999;
box-shadow: 1px 1px 5px #bbb;
}
</style>

The initial selector is incorrect. Change .container to .heroes