I have the following code in a php page
<div class="vmenu">
<div class="first_li"><span >Add Shift</span></div>
<div class="first_li"><span>Add Comment</span></div>
</div>
Now I want to remove the div contains text "Add Shift" on document ready
$(function(){
$('.first_li span:contains('Add Shift')').remove();
});
Use jQuery .remove() and :contains(). Note that it's case sensitive
$('div:contains("Add Shift")').remove();
$('div.vmenu div:first-child').remove();
check it out on jsfiddle: http://jsfiddle.net/7CFAq/
Related
I have next structure:
<div class="input_fields_wrap">
<div class="row">
<select id="house-1-room-1"><?php echo $options; ?></select>
<input type='text' class='name' name='house-1-room-size-1' placeholder='Room Size'>
</div>
</div>
<button class="add_field_button">Add Another Room</button>
When add_field_button clicked, I am trying to get the id of previous select tag, in my case it is house-1-room-1 with jquery (or vanila js).
I've tried:
$(this).parent().prev("select").attr('id');
and
$(this).prev("div").closest("select").attr('id');
And many other combination of above to no avail.
Please help!
Use:
$(this).prev("div").find("select").attr('id');
.closest() goes up in the DOM hierarchy, find() searches down the hierarchy.
Need to use find():
$(this).prev("div").find("select").attr('id');
The .closest() is the opposite, goes from bottom to top. While .find() will go from the current place inside the hierarchy.
find the previous element and find the select tag within that
$(this).prev().find('select').attr('id')
this should work
here is a fiddle https://jsfiddle.net/fxabnk4o/3/
I have the following HTML on my web page.
Is it possible to use PHP (or jQuery) to grab the content within the divs? I'd ultimately like to use it within a PHP script.
<div id="selectedaddress">
<div>James</div>
<div>Thomson</div>
<div>London</div>
<div>England</div>
</div>
Thank you.
use like this
$('#selectedaddress').children().each(function(){
console.log($(this).text());
});
see console on jsfiddle - working example
Possible another easy way using map()
$("#selectedaddress div").map(function(x,e){
alert($(e).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectedaddress">
<div>
James
</div>
<div>
Thomson
</div>
<div>
London
</div>
<div>
England
</div>
</div>
Depends on what functionality you are looking for. Judging by the code you have, most likely you want a <form> with <input> tags and a submit button.
For a form functionality, check out PHP 5 Form Handling and The <select> element. You would like to grab a value from a selected list.
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);
Below is my code.
HTML :
<div id="vis">
</div>
JavaScript:
$('#vis').find('.set_texts').wrapInner('<div class="new_text">');
($('#vis').find('.new_text').text("NEW TEXT VALUE"));
When I run this code in 'inspect element' I can see the below code as output but nothing is showing in the browser. I want to show 'NEW TEXT VALUE' in the browser,how?
<div id="vis">
<div class="new_text">NEW TEXT VALUE</div>
</div>
<text> is not a valid HTML tag, you can use <div>,<p>,<span>... instead:
$('#vis').find('.set_texts').wrapInner('<span class="new_text">');
$('#vis').find('.new_text').text("NEW TEXT VALUE");
instead of this
$('#vis').find('.set_texts').wrapInner('<text class="new_text">');
use this
$('#vis').find('.set_texts').wrapInner('<span class="new_text">');
first you need to change html.
html:
<div id="vis">
<div class="set_texts"></div>
</div>
you do not have .set_texts element in your selected div(#vis). so wrapInner() is not adding any div.
you also have extra ) in the second line of jquery.
try this jquery:
$(document).ready(function(){
$('#vis').find('.set_texts').wrapInner('<div class="new_text">');
$('#vis').find('.new_text').text("NEW TEXT VALUE");
});
working demo
let me know if you have any question.
How do I get jQuery to return the entire
<div class="loan_officer_apply_now_link">APPLY NOW!</div>
Currently it only returns the contain "a" element
APPLY NOW!
Test Code
$('a').click(function(){
alert($('.loan_officer_apply_now_link').html());
})
http://jsfiddle.net/gUd9J/1/
Use the native JS .outerHTML property instead of just the jQuery .html() function. It will make you life a lot easier, instead of trying to do fancy jQuery wraps. You can do this with the following:
$(selector)[0].outerHTML // This is your HTML code
You can also use the element's outerHTML property
$('a').click(function(){
alert($('.loan_officer_apply_now_link').get(0).outerHTML);
})
Demo: Fiddle
jQuery doesn't have a built-in function for this.. here's one solution:
http://jsfiddle.net/TvWLL/
$('a').click(function(){
alert($('.loan_officer_apply_now_link').clone().wrap('<div>').parent().html());
})
give a wrapper class to it
Click Me<br /><br />
<div class="container">
<div class="loan_officer_apply_now_link">APPLY NOW!</div>
</div>
$('a').click(function(){
alert($('.container').html());
})
Working fiddle
It appears you want the parents html:
$(this).parent()[0].outerHTML