$(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/
Related
I have the following html and am stumped as to how to read the contents of the href tag?
<p class="xyz-title">
<a href="http://www.youtube.com/embed/xyz">
<span class="field-content">Title here</span>
</a>
</p>
I tried document.getElementByClass('xyz-title')[0].innerHTML but that didn't work obviously.
Thanks very much for pointing me in the right direction.
It is a syntax error. It is supposed to be getElementsByClassName. Use this instead:
document.getElementsByClassName('xyz-title')[0].innerHTML
And for selecting the <a> tag inside the <p class="xyz-title"> You need to use this code:
document.getElementsByClassName('xyz-title')[0].children[0].href
document.getElementsByClassName('xyz-title')[0].getElementsByTagName('a')[0].href
Or, you can simply use:
document.getElementsByTagName('a')[0].href
Fiddle: http://jsfiddle.net/praveenscience/DZhRv/
.innerHTML will give you the content of the element, not the value of any attributes. .href will give you the href value.
You tried to use getElementByClass() by there is no such function - you want getElementsByClassName() (as per the tag that you added to the question), a function that returns a list so you do need the [0] to get the first one.
To select the anchor element, try:
document.getElementsByClassName('xyz-title')[0].getElementsByTagName('a')[0].href
Or, simpler:
document.querySelector('.xyz-title a').href
Demo: http://jsfiddle.net/6Pg43/
Note that either way will give an error if the elements don't exist.
Working FIDDLE Demo
Try this:
var href = document.getElementsByClassName('xyz-title')[0].getElementsByTagName('a')[0].href;
alert(href);
Let's say that I have a DOM object:
var a = document.getElementById('parent')
I want to search all input inside element a.
What should I do in jQuery?
I want to disable all input inside a, like syntax below:
$('#parent input').attr('disabled',true);
I tried
$(a).children('input').attr('disabled',true);
but gave no results.
Note: var a is an element I got from another function.
$(a).find('input').prop('disabled', true);
children() just searches immediate children of the element while find() searches all descendants.
Update: Also consider sinsedrix's remark on the difference between attr() and prop().
Don't forget attr is for HTML attributes and prop for DOM properties, try this:
$(a).find('input').attr('disabled','disabled');
or
$(a).find('input').prop('disabled',true);
$(a).find('input').attr('disabled',true)
$(a).find('input').attr('disabled',true);
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 ().
How do I convert the following javascript to using JQuery?
document.getElementById("asc").removeAttribute("href");
document.getElementById("asc").onclick = "";
document.getElementById("asc").style.textDecoration = "underline"
I think I'm close using the below code but this doesn't quite work.
$('#asc').attr('href', '').click(function() {return false}).css('text-decoration', 'underline');
Why not just
$('#asc').replaceWith($('#asc').text())
which will replace the link with just ordinary text, and save you having to worry about all the aspects of a link.
The only differences I can see is that the href attribute isn't actually being removed. You're also creating an event handler when the first example doesn't have one.
This will remove the attribute instead:
$('#asc').removeAttr('href').css('text-decoration', 'underline');
If there's already an onclick handler on it, try this:
$('#asc').removeAttr('href').attr('onclick', '').css('text-decoration', 'underline');
If you can't decide between two of them you want the following...
$('#asc').removeAttr('href').click(function() {return false}).css({'text-decoration' : 'underline'});
why assigning a new event handler if you want to get the rid of it
$("#asc")
.attr("href", "")
.unbind("click")
.attr("style", "text-decoration:underline");
I have a div <div id="masterdiv"> which has several child <div>s.
Example:
<div id="masterdiv">
<div id="childdiv1" />
<div id="childdiv2" />
<div id="childdiv3" />
</div>
How to clear the contents of all child <div>s inside the master <div> using jQuery?
jQuery's empty() function does just that:
$('#masterdiv').empty();
clears the master div.
$('#masterdiv div').empty();
clears all the child divs, but leaves the master intact.
jQuery('#masterdiv div').html('');
Use jQuery's CSS selector syntax to select all div elements inside the element with id masterdiv. Then call empty() to clear the contents.
$('#masterdiv div').empty();
Using text('') or html('') will cause some string parsing to take place, which generally is a bad idea when working with the DOM. Try and use DOM manipulation methods that do not involve string representations of DOM objects wherever possible.
I know this is a jQuery related question, but I believe someone might get here expecting a pure Javascript solution. So, if you were trying to do this using js, you could use the innerHTML property and set it to an empty string.
document.getElementById('masterdiv').innerHTML = '';
jQuery recommend you use ".empty()",".remove()",".detach()"
if you needed delete all element in element, use this code :
$('#target_id').empty();
if you needed delete all element, Use this code:
$('#target_id').remove();
i and jQuery group not recommend for use SET FUNCTION like .html() .attr() .text() , what is that? it's IF YOU WANT TO SET ANYTHING YOU NEED
ref :https://learn.jquery.com/using-jquery-core/manipulating-elements/
If all the divs inside that masterdiv needs to be cleared, it this.
$('#masterdiv div').html('');
else, you need to iterate on all the div children of #masterdiv, and check if the id starts with childdiv.
$('#masterdiv div').each(
function(element){
if(element.attr('id').substr(0, 8) == "childdiv")
{
element.html('');
}
}
);
The better way is :
$( ".masterdiv" ).empty();
$("#masterdiv div").text("");
$("#masterdiv > *").text("")
or
$("#masterdiv").children().text("")
$('#div_id').empty();
or
$('.div_class').empty();
Works Fine to remove contents inside a div
You can use .empty() function to clear all the child elements
$(document).ready(function () {
$("#button").click(function () {
//only the content inside of the element will be deleted
$("#masterdiv").empty();
});
});
To see the comparison between jquery .empty(), .hide(), .remove() and .detach() follow here http://www.voidtricks.com/jquery-empty-hide-remove-detach/
When you are appending data into div by id using any service or database, first try it empty, like this:
var json = jsonParse(data.d);
$('#divname').empty();
$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});
or
$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});
try them if it help.
$('.div_parent .div_child').empty();
$('#div_parent #div_child').empty();