i want to delete a particular class from my object as my requirement is to delete that dom data before displaying content. I have written a sample code but not able to get why that is not working. I jquery's remove is also not working. Please help me to get it solve. Thanks in advance
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// complete html
var test;
test = $('#issue_detail_first_row').html();
var x = $(test).find('#issue_detail_nav').not('.p1');
$('#sett').html(x);
});
</script>
</head>
<body>
<div id="issueDetailContainer">
<div id="issue_detail_first_row">
<div>
<div id="issue_detail_nav">
<div>test</div>
<div id="gett">
<div class="p1">
this content need to be deleted 1
</div>
</div>
<div class="p1">
this content need to be deleted 2
</div>
</div>
</div>
</div>
<br/><br/><br/><br/>
<div id="sett">
</div>
You need to remove the content from the DOM directly.
$("#issue_detail_first_row .p1").remove();
That will select the .p1 elements and remove them from the DOM
you can use remove function on javascript object.
If you want to preprocess it before displaying.
example
var a =$("#issue_detail_first_row").html();
var jhtml =$(a)[0];
$(jhtml).find('.p1').remove();
alert($(jhtml).html());
now use jhtml .
demo
http://jsfiddle.net/WXPab/14/
It seems that you're trying to duplicate a section, but without the .p1 elements.
You could use the clone()[docs] method to clone the section, the remove()[docs] method to remove what you don't want, and then insert its HTML.
$(document).ready(function() {
var test = $('#issue_detail_first_row').clone(); // clone it
test.find('.p1').remove(); // find and remove the class p1 elements
$('#sett').html( test.html() ); // insert the new content
});
Working example: http://jsfiddle.net/YDZ9U/1/
Only thing is that you'll need to go through and update the IDs in the clone, so that they're not duplicated on the page.
Related
I'm trying to get feed content from facebook dom.
<div role="feed">
so i did that:
querySelectorAll($("div[role='feed']"))
like this:
get div by role
but it returns undifend result.
I tried some more similar way but still get undifend.
It is possible to get this data?
thanks
Please remove $. It's not needed and might throw an undefined error. Are you running after the page has loaded? Are you using .innerHTML to get the HTML contents? This works for me:
<div role="feed">Hello</div>
<script>
console.log(document.querySelector('div[role="feed"]').innerHTML);
</script>
In case, if you aren't running after your page has loaded, put your code inside onload event of window object.
You should change your code this way:
<script>
// Loading script before element.
window.onload = function () {
console.log(document.querySelector('div[role="feed"]').innerHTML);
}
</script>
<div role="feed">Hello</div>
This works if you are loading script before element.
You are mixing JavaScript and jQuery.
You don't need $() to do that with .querySelectorAll()
You don't need .querySelectorAll() to do that with $()
You can do any of the following to select the div with role="feed":
let divs_js = document.querySelectorAll("div[role='feed']");
console.log('Elements matched:', divs_js.length);
let divs_jq = $("div[role='feed']");
console.log('Elements matched:', divs_jq.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="feed"></div>
<div role="not-feed"></div>
<div role="feed"></div>
<div role="feed"></div>
<div role="not-feed"></div>
⋅
⋅
⋅
Here is an example of what you can do to get the content, then:
console.log("Using JS:");
let divs_js = document.querySelectorAll("div[role='feed']");
divs_js.forEach(function(elm){
console.log(elm.innerHTML); // or .innerText, according to your needs
});
// ----------------------
console.log("---------");
console.log("Using jQ:");
let divs_jq = $("div[role='feed']");
$(divs_jq).each(function(){
console.log($(this).html()); // or .text(), according to your needs
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="feed">feed 1</div>
<div role="not-feed">not feed 1</div>
<div role="feed">feed 2</div>
<div role="feed">feed 3</div>
<div role="not-feed">not feed 2</div>
Hope it helps.
With jQuery you don't need querySelectorAll() to get the DOM you can achieve this with $("div[role='feed']"). Since you are using querySelectorAll(), it accept string which must be a valid CSS selector string; if it's not, a SyntaxError exception is thrown. Since you are using wrong syntax, it returns undefined.
And you need text() function to get content of div in jQuery. text() get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.
console.log($("div[role='feed']").text());
console.log($("div[role='feed']"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="feed">
so i did that:
</div>
long time reader first time asker....
If I have a textarea with html text in it (I am trying to verify certain elements have an id) and I send that code to a function how do i update that textarea with the new changes?
I have tried wrapping it in a div from previous suggestions I read here, but its not showing me the updated html.
Here is my fiddle https://jsfiddle.net/gk6yLh77/
function runfunc(){
var uniqueIdFind = '<div>'+jQuery('#pages_htmlcode_content').val()+'</div>';var curDateEpochSec='12112';
if(jQuery('#content-wrapper',uniqueIdFind).length==1){
jQuery('#content-wrapper',uniqueIdFind).find('[onclick], [href]').not('link').not('a[nostat],[statproc],a[href="#top"]').each(function(index){
if(!jQuery(this,uniqueIdFind).attr('id')){console.log('id======dd_'+curDateEpochSec+'_'+index);jQuery(this,uniqueIdFind).attr('id','dd_'+curDateEpochSec+'_'+index);}
});
jQuery('#pages_htmlcode_content2').val(uniqueIdFind);
}else{
alert('erros')
}
}
I put a console write in the function and can see the id's being added, but for the life of me I can not figure out how to get those changes.
here is the sample html to put into the first textarea
<html lang="en-US">
<head>
</head>
<body id="com">
<div id="top" class="landing-page">
</div>
<div id="content-wrapper">
<div id="content-main">
asdasad
</div>
</div>
</body>
</html>
It just spits out the original code :(
Thanks
You neeed to wrap your test element in $()
example:
if(jQuery(uniqueIdFind).find('#content-wrapper').length==1)
I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.
Try:
$("#region_North_America").append(row_str);
using append().
Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.
Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);
Hello im looking to show a div based on page content. Its will go on a dynamically generated shop page. I need a notice to display upon a specific item being in the cart - eg if someone has a 'toy frog' in their cart the 'frog promo.div' needs to show.
I have been trying to adapt the following script/html for usage
any help appreciated. Dave
<div class="contactUs"?>contact</div>
<div class="hideThis"?>xxx</div>
<script type="text/javascript">
if (jQuery("div.contactUs:contains('toy frog')").length) {
jQuery(".hideThis").css("display","none");
}
</script>
============================================================
Thanks all for help so far.. I know nothing about JS!
I dont think I have been clear reading through/trying all this..
What i am trying to acheve is
1**. when a product with the word 'subscrtiption' is added to my shopping cart I need a html message to show.**
I tried a few of the examples that seem to work on jsfiddle, but not on my server.. is that common?
cheers all..again
I don't understand your code sample (in relation with your problem description: cart content with product to show a promo div), but I made a small code to answer your problem.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<!-- Into your page HTML, Imagine you have two parts -->
<!-- The first one is the cart that contain the item the user want to buy -->
<div class="cart">
*Cart*
<div class="sausages">sausages</div>
<!-- Try to remove comment of code following -->
<!-- <div class="fries">fries</div> -->
</div>
<br/>
<br/>
<!-- The second one is the content page that contain the div you want to display according to item into your cart -->
<div class="content">
*Content*
<div class="sausages" style="display:none">sausages</div>
<div class="fries" style="display:none">fries</div>
</div>
</body>
</html>
JS
var $content = $('.content');
var $cart = $('.cart');
// for each children element (el) into my div cart
$cart.children().each(function(index, el) {
// I try to find a element with my className into my div Content
// And if I find it Then I show it
$content.find('.' + el.className).show();
});
I have updated my code with comments to be clearer
You can use is()
if( $('.contactUs').is(':empty') ) {
// ...
Or you could just test the length property to see if one was found:
if( $('.contactUs:empty').length ) {
// ...
Keep in mind that empty means no what space either. If there's a chance that there will be white space, then you can use $.trim() and check for the length of the content.
if( !$.trim( $('.contactUs').html() ).length ) {
// ...
var contactDivText = $('.contactUs').text();
var hideDiv = $('.hideThis');
if(contactDivText == ''){
hideDiv.hide();
}else{
hideDiv.text(contactDivText);
}
<script type="text/javascript" src="jquery.js"></script>
<script>
var printLinks = function () {
var links = $(.info).code;
document.write(links);
};
</script>
<form>
<input type="button" value="printlinks" onclick="printLinks()"></input>
</input>
</form>
I am trying to write to a document all of the text in a certain element type that is a child of an element I query by class $(.info). I know document.write is not the best method for writing to a document. info is the class of the parent element of the <code> tags that contain the links I want to print. I am very new to jQuery so I am probably misusing it. Any help would be appreciated.
Okay, if I understand correctly, you want to grab the content in the element with the class info. If that is correct you want to take the following approach:
<script type="text/javascript">
function printLinks() {
var content = $('.info').html(); // Grab innerHTML of element
$('#idOfTargetElement').html( content ); // write the content here
}
</script>
EDIT:
See this fiddle for clarification:
http://jsfiddle.net/XD5qj/
You can use the html() function of jQuery.
For example:
<script>
$(function(){
var links = $('.info code').html();
$('.output').html(links);
});
</script>
<div class="info"><code>Example code</code></div>
<div class="output"></div>
If you have multiple "< code>" tags, you want to use the handy "each()" function of jQuery:
$('.info code').each(function(){
$('.output').append($(this).html());
});