We Keep Coding

jQuery - Hide DIV which has a span element with certain text inside

I have several divs with the same class names and varying IDs. The ID is not set for the text I need to target
I need to target the Telephone Call text. If the div contains that text, how do I hide the containing div
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
</div>
I have tried the following to no avail
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").hide ();
});
</script>

If your code is hiding the span, but not the parent div, you can target the div to be hidden using mostly the same code you already wrote.
<script>
$(document).ready(function() {
$(".rn_FieldDisplay > span:contains('Telephone Call')").parent().hide();
});
</script>

Try selecting it's child instead of the element itself :
$(document).ready(function() {
$(".rn_FieldDisplay *:contains('Telephone Call')").hide ();
});

Try with find() function
$(document).ready(function() {
$(".rn_FieldDisplay").find(":contains('Telephone Call')").hide ();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rn_FieldDisplay_155" class="rn_FieldDisplay rn_Output">
<span class="rn_DataLabel">Telephone Call </span>
<div class="rn_DataValue">No</div>
<p class="rn_DataLabel">Telephone Call </p>
</div>

Well you can try this:
if ($(".rn_FieldDisplay > span:contains('Telephone Call')").length > 0) {
$(".rn_FieldDisplay > span").hide();
}

Trying to show element based on whether or not a specific input field has focus

As the title says, I'm trying to figure out how I can show a element based on whether or not a input field has focus our not.
So when the specific input field has focus I need to show a element, and when it has no focus the element should be hidden.
I've tried a lot of different things, and this is my lates try:
<script>
$(".only-oslo-delivery").hide();
if ($("#address_city").is(":focus")) {
$(".only-oslo-delivery").show();
};
</script>
only-oslo-delivery is a < p > tag with the text I want to display when the input field has focus.
address_city is the ID of the input field.

Your code only runs once, you need event handler to execute it as per user actions:
$("#address_city").on('focus', function() {
$(".only-oslo-delivery").show();
}).on('blur', function() {
$(".only-oslo-delivery").hide();
})
.only-oslo-delivery {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="address_city">
<p class="only-oslo-delivery">test</p>

You can bind events to your button to show/hide the .only-oslo-delivery element when it is focused and blurred.
$('#address_city').focus(function() {
$('.only-oslo-delivery').show();
}).blur(function() {
$('.only-oslo-delivery').hide();
});
Interestingly if the elements are next to each other on the page you could use adjacent css rules to accomplish this without any javascript.
<input type="text" id="address_city">
<p class="only-oslo-deliver">...</p>
And then use the following css:
.only-oslo-delivery {
display: none;
}
#address_city:focus~.only-oslo-delivery {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="address_city">
<p class="only-oslo-delivery">test</p>
.only-oslo-delivery {
display: none;
}
$("#address_city").on('focus', function() {
$(".only-oslo-delivery").show();
}).on('blur', function() {
$(".only-oslo-delivery").hide();
})

You need to use focus event to show and blur to hide:
$("#address_city").on('focus blur', function(e) {
$(".only-oslo-delivery").toggle($('#address_city').is(':focus') && e.type === 'focus');
});
.only-oslo-delivery {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='address_city'>
<p class='only-oslo-delivery'>only-oslo-delivery</p>
.toggle(true/false) would show when true and hide when false.

Here is another way:
var $field = $('#address_city');
var $info = $('.only-oslo-delivery').hide();
$field.on('focus blur', function (e) {
$info.toggle(e.type === 'focus');
});

How to target only the ID in the div with addClass on a checkbox

I am trying to only target the div associated with the checkbox. Right now the script I am using only changes the class of the first div with the ID of taskList instead of the one where the checkbox is located.
$('input:checkbox').change(function () {
if ($(this).is(":checked")) {
$('#taskList').addClass("complete");
} else {
$('#taskList').removeClass("complete");
}
});

id should be unique each element. Use class taskList instead like following.
$('input:checkbox').change(function () {
if ($(this).is(":checked")) {
$(this).closest('.taskList').addClass("complete");
} else {
$(this).closest('.taskList').removeClass("complete");
}
});
.complete {
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="taskList">
<input type="checkbox"/>
</div>
<div class="taskList">
<input type="checkbox" />
</div>

you should us closest over here.
Suppose you have html like this:-
<div class="taskList">
<input type="checkbox"/>
</div>
<div class="taskList">
<input type="checkbox" />
</div
Now what colsest will do is, it goes for each element in the set, get
the first element that matches the selector by testing the element
itself.
so on check ( change ) you should do,
$(this).closest('.taskList').addClass("yourClass");
Full code goes,
$('input:checkbox').change(function () {
if ($(this).is(":checked")) {
$(this).closest('.taskList').addClass("yourClass");
} else {
$(this).closest('.taskList').removeClass("yourClass");
}
});
Hope it helps!

How to add a class to a div created inside a contenteditable element?

Here is the example code:
<div>
Text..
<div id="editable-editor" contenteditable="true">Some Text Here...</div>
</div>
If press enter inside the #editable-editor after Some Text it will create a <div>Here...</div> element for the text Here.
How do I add the jquery-ui draggable class to the <div>Here...</div> element to make it dragabble?

You'll want to reference this SO answer. Essentially, there is no cross-browser guaranteed way to know when someone has added new content to your contenteditable element. You can guess, however.
$("#editable-editor").keydown(function () {
$(this).children('div').each(function () {
$(this).draggable();
});
});
Simply listen for key events and add draggable to your new divs.

please try this
$('div', '#editable-editor').each(function (i) {
$(this).addClass('ui-widget-content');
$(this).draggable();
});

Try using keypress , change events , .has() , .not()
$("#editable-editor")
.on({
"keypress": function(e) {
if (e.keyCode === 13) {
$(this).append("<div>Here...</div>")
.change()
}
},
"change": function() {
if ($(this).has("div")) {
$("div", this).not(".ui-draggable").draggable()
}
}
})
.draggable {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div>
Text..
<div id="editable-editor" contenteditable="true">Some Text
</div>
</div>

Select one element at a time using jquery

I have multiple input checkboxes wrapped up in p tags <p><input type="checkbox" /></p>. I'm trying to change the background-color of the P tag when the checkbox is :checked The problem I'm having is that all of the <p> </p> tags background colors are changing at the same time. I only want the current paragraph tag background-color to change.
HTML
<p>
<input type="checkbox" />
<label>Animals & Pets</label>
</p>
<p>
<input type="checkbox" />
<label>Business & Finance</label>
</p>
<p>
<input type="checkbox" />
<label>Auto's & Cycles</label>
</p>
CSS
.highlight { background-color: #DDD; }
jQuery
$(document).ready(function() {
$('input').click(function() {
if ($(this).is(':checked')) {
$('p').addClass('highlight')
} else {
$('p').removeClass('highlight')
}
});
});

Use closest:
$('input').change(function () {
if ( this.checked ) {
$(this).closest('p').addClass('highlight');
} else {
$(this).closest('p').removeClass('highlight');
}
});
You can also make this a little shorter by using toggleClass:
$('input').change(function () {
$(this).closest('p').toggleClass('highlight', this.checked);
});

You can target the parent paragraph with closest(), and use toggleClass() to toggle the class, and the change event would be the proper event to listen for when changing a checkbox :
$(document).ready(function() {
$('input').on('change', function() {
$(this).closest('p').toggleClass('highlight', this.checked);
});
});
FIDDLE

Use this isntead of just p. Then get its parent using .parent()
$(document).ready(function() {
$('input').click(function() {
if ($(this).is(':checked')) {
$(this).parent().addClass('highlight')
} else {
$(this).parent().removeClass('highlight')
}
});
});