We Keep Coding

HTML store value into div and get its value

I have a div like
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>
Here I want to get the value in data-value like by doing document.getElementById('first').value or something like this..
How can I get this value or if there is similar approach

Use .attr() or .getAttribute(). That would work.
jQuery Solution
$(function(){
console.log($('#first').attr('data-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>
JavaScript Solution
function Example(){
console.log(document.getElementById('first').getAttribute("data-value"));
}
Example();
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>

jQuery has the data() method. Consider using it:
// To get/read the value
$("#first").data("value")
// To set the value
$("#first").data("value", "foo-bar")
Docs:
Return the value at the named data store for the first element in the
jQuery collection, as set by data(name, value) or by an HTML5 data-*
attribute.

You can consider it as a normal attribute and use plain javascript as follows:
document.getElementById("first").getAttribute('data-value');
Since the attribute naming follows the data- naming convention we can use the HTML5 data specification.
In plain javascript you use the dataset API:
document.getElementById("first").dataset.value;
However, jQuery provides a nice shortcut for this:
$("#first").data("value");

I have found that using .val() works nicely here
To Set:
$("#div").val(1); // Sets value of div to 1
To Retrieve:
let foo = $("#div").val(); // Retrieves "1"

Use the getAttribute() method.
In your case -
document.getElementById('first').getAttribute('data-value')
Documentation can be found here:
http://www.w3schools.com/jsref/met_element_getattribute.asp

Get attribute of clicked div with dynamic ID

I need to get the 'role' attribute of a div with a dynamically generated ID in regards to the below code.
HTML:
<div id="renable0" role="0">
false
</div>
<div id="renable1" role="1">
true
</div>
<!-- THE LIST OF DIVS CONTINUES IN INCREASING INCREMENTS OF 1 -->
Javascript:
$("[id^='renable']").editInPlace({ // editInPlace is a jQuery plugin
url: 'save.php',
params: 'pos='+$(this).attr('role') // How can I get this role attribute for the clicked div?
});

You'll need to use a .each() loop:
$("[id^='renable']").each(function() {
$(this).editInPlace({
url: 'save.php',
params: 'pos='+$(this).attr('role')
});
});
It would be nice if editInPlace allowed the params option to be a function, like some other jQuery plugins do for similar options. But since it doesn't, you need to do this.
BTW, your use of the role attribute doesn't match the way it's intended to be used as part of ARIA. Standard roles are things like button and menuitem. You shouldn't abuse standard attributes like this, or make up custom attributes. If you want to put extra attributes in your elements, use data-XXX elements, e.g.
<div id="renable0" data-role="0">
You can access this in jQuery with $(this).data('role').

this won't refere to your element, you should keep a reference to it:
// loop through your elements
$("[id^='renable']").each(function () {
// keep reference to it
var $elem = $(this);
// make it editInplace
$elem.editInPlace({
url: 'save.php',
params: 'pos='+$elem.attr('role')
});
});

How to get the relevant 'this' object in jquery?

here's the snippet of code I have:
$(".block").mouseover(function() {
$("#block_title").html("title"));
});
Each div of class .block has a data-title attribute (value of each data-title attribute is different). I want to be able to access this data-title attribute inside my anonymous function.

You can access it using the .data method:
$(".block").mouseover(function() {
...
$("#block_title").html($(this).data('title'));
});

You can use the .data() function in jQuery
$(".block").mouseover(function() {
$("#block_title").html($(this).data('title'));
});

You may be referring to this code.
$('.block').attr('data-title', 'This is a random value');
According to the jQuery API documentation:
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
I hope this answers your question.

If you mean you have an HTML5 data- attribute:
$(".block").mouseover(function() {
$("#block_title").html( $(this).attr("data-title") ); //data-title value
});
Or, if you mean you have a title property in the jQuery arbitrary data:
$(".block").mouseover(function() {
$("#block_title").html( $(this).data("title") ); //title value in the data object
});

Change outerHTML in javascript

$(editor[i])[0].outerHTML has a value of:
<p style="color: red;" data-mce-style="color: red;">some string</p>
I want data-mce-style="color: red;" to disappear.
I'm doing that like this:
$(editor[i])[0].outerHTML.replace('data-mce-style="color: red;"', '');
But it's not replacing it.

.replace creates a new transformed string; it does not alter the original variable. You're simply creating a new string and not storing the new string back into outerHTML, like:
$(editor[i])[0].outerHTML = $(editor[i])[0].outerHTML.replace('data-mce-style="color: red;"', '');
However, this only solves your immediate problem -- there are vastly better ways to accomplish what you need than stringifying and re-parsing your <p> element. Since you're using jQuery, the most obvious way would be to use the removeAttr method:
$(editor[i]).removeAttr('data-mce-style')​;​

Try:
$(editor[i]).removeAttr('data-mce-style')
http://api.jquery.com/removeAttr/
Of course this will apply to all elements in your selector. If you just want to apply this to element 0 then use:
$(editor[i]).first().removeAttr('data-mce-style')

element.setAttribute(attr, null)
or
element.removeAttribute
No need for outerHTML and replace. Note that replacing HTML will remove event listeners (other than attribute event handlers).

$(editor[i]).removeAttr('data-mce-style')​;​
FIDDLE

Try to use jQuery removeData():
$(editor[i]).removeData('mce-style');

you need to change/remove a particular attribute, for that you need to use
$(editor[i]).removeAttr('data-mce-style');
for more info check the following links:
http://api.jquery.com/removeAttr/
if you need to change the value of a particular attribute then do:
attr(attributeName, value);
for more info about the same check the following link:
http://api.jquery.com/attr/

Does jQuery attr allow for non standards?

I am already using id and title but i need to parse through 2 more bits...
$(this).attr("title"); $(this).attr("id");
Will $(this).attr("custom1"); work ??

yes, and BTW you can set multiple attributes at once:
$('.myselector').attr({
src: 'thefile.gif',
width: 200,
height: 300 });

Yes, and you can use it for all of the data-attributes in HTML5. Which is the preferrable way to add extra attributes.
Additionally, all data-* attributes are automatically added to jQuery's data() object for easy access

If you just want to associate (by name) some data with a DOM element, you're better off using the ".data()" method:
$(this).data('custom1', someValue);
The ".data()" API makes HTML5-style "data-foo" attributes coded into the HTML accessible:
var foo = $(this).data('foo'); // gets the "data-foo" attribute value from element

Yes it works, but it's not a good idea.
Better use .data('foo', 'bar'); if you want to store some data on an element.

Yes, and the best thing you can do is just test it.
<script>
$(document).ready(function() {
// Handler for .ready() called.
alert( "custom1 = " + $("#myField").attr("custom1") );
});
</script>
<div id="myField" custom1="My Custom Field"></div>
Now, you are breaking markup, so I would suggest storing your info in ALT tags or NAME tags to prevent that ().