I use jQuery .html() but is it possible to add an element without to removing the other HTML elements?
My code look so:
<div id="contentboxes">
<div class="con1">content 1</div>
<div class="con1">content 2</div>
</div>
I have tried this with jquery:
$('#contentboxes').html('<div class="con3">Content 3</div>');
But this command removes my other 2 boxes, is it possible to add without to removing other boxes?
use .append() instead of .html().
$('#contentboxes').append('<div class="con3">Content 3</div>');
http://api.jquery.com/append/
Related
I have some div tags which has some text & elements in it & I want to remove those div's, They are looks like this
<div style="font-family:verdana;font-size:12px;">
Example
example
</div>
There are many div's like this & I want to remove them all with using jQuery or javascript
If the elements have nothing in common such as a class, you can remove it by using the :contains and remove() method.
$("div:contains('Example')").remove()
Full example shown below:
$("div:contains('Example')").remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div>
Example
</div>
<div>
Darren
</div>
If the elements do have something in common you could use the class selector.
$(".common-class").remove();
Based on Darren's answer, if you want to be extra sure (as :contains will match and delete any div containing the word example), you can make sure it's a div that has an anchor with that same example as children, then go back to the parent and remove it.
If this doesn't work, please paste a few more divs so we can see a common pattern and target it the safest way possible.
$(document).ready(function(){
$('#remove').click(function(e){
$("div:contains('Example')").children("a:contains('example')").parent("div:contains('Example')").remove()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-family:verdana;font-size:12px;">Example example</div>
<div style="font-family:verdana;font-size:12px;">Don't remove example</div>
<div style="font-family:verdana;font-size:12px;">Example don't remove</div>
<button id="remove">
Remove undesired divs
</button>
I would like to hide certain text after a tag.
My HTML is:
<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>
jQuery:
$($('.listing_detail strong')[0].nextSibling).wrap('<span style="display:none"></style>');
The jQuery above only removes the text from the first element and not both.
How can I modify it so that it removed the text from both elements.
Fiddle
Just consider looping through your elements and hiding the next sibling for each <strong> element via the each() function :
// Loop through each strong element
$('.listing_detail strong').each(function(){
// Find it's next sibling and wrap it
$(this.nextSibling).wrap('<span style="display:none"></style>');
});
Example
$('.listing_detail strong').each(function(){
$(this.nextSibling).wrap('<span style="display:none"></style>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>
Why don't you use a .each() and hide 'em one by one?
$('.listing_detail strong').each( function(){
$($(this)[0].nextSibling).wrap('<span style="display:none"></style>');
});
why not simply
$('.listing_detail strong').hide();
?
also add this to remove text from second element:
$($('.listing_detail strong')[1].nextSibling).wrap('<span style="display:none"></style>');
so it will be:
$($('.listing_detail strong')[0].nextSibling).wrap('<span style="display:none"></style>');
$($('.listing_detail strong')[1].nextSibling).wrap('<span style="display:none"></style>');
Try this:
$($('.listing_detail strong')[0].nextSibling).wrap('<span style="display:none"></style>');
$($('.listing_detail strong')[1].nextSibling).wrap('<span style="display:none"></style>');
I think the problem was the [0] selector on $('.listing_detail strong'). Use a traversal method like 'forEach' instead.
https://jsfiddle.net/d4gyv6ed/12/
$('.listing_detail strong').each(function(index){
$(this).siblings().wrap('<span style="display:none"></style>');
});
It would be best to not get all tricky with indexing if you do not have to.
Update your markup like this:
<div class="listing_detail col-md-4"><strong>Living Room:</strong>
<div class="hide-this-tag">Yes</div>
</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong>
<div class="hide-this-tag">No</div>
</div>
Then do this with jQuery:
$(".hide-this-tag').hide();
Or just simply use css:
.hide-this-tag {
display:none;
}
If all you were looking for are text nodes within a particular tag, this is the approach that works best, irrespective of the positioning of the text node within the tag.
Try using .contents() and .filter() methods and this.nodeType == 3 like so:
$('.listing_detail').contents().filter(function() {
return this.nodeType == 3;
})
.wrap('<span style="display:none;"/>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>
Whats I'd do is create a CSS class which has hidden properties and add them to the containers with your jQuery.
This gives you the freedom of adding and removing classes in the future with ease.
This should help you do exactly that
https://api.jquery.com/addclass/
And to apply it for multiple divs use each function in jquery
https://api.jquery.com/each/
I want to move an existing div which is inside another one to the body of HTML.
For example i have:
<body><div1><div2>blah</div2></div1></body>
I would like it to make:
<body><div1></div1><div2>blah</div2></body>
Any suggestions?
Give your divs some IDs:
<body>
<div id="one">
<div id="two">
</div>
</div>
</body>
Then use appendTo
$('#two').appendTo('body');
$('div2').appendTo('body');
(you'll have to change div2 to a proper selector of course)
use some combination of remove and append to achieve ur out put.
jQuery Remove Method
jQuery Append Method
I have some html elements in my code like this
<div rel="test1">item1</div>
<div rel="test1">item2</div>
<div rel="test1">item3</div>
<div rel="test2">item4</div>
<div rel="test2">item5</div>
and I need a way to select all the divs that use rel="test1" and add a class to them
how can I do this with jQuery?
$('div[rel=\'test1\']')
http://api.jquery.com/category/selectors/attribute-selectors/
You can then add a class with .addClass(). http://api.jquery.com/addClass/
$('div[rel="test1"]').addClass("myClass");
Demo
$('div[rel="test1"]').addClass('fooClass');
Live DEMO
$(function(){
$("div[rel='test1']").addClass("newClass");
});
working sample http://jsfiddle.net/4WEBk/13/
Using jQuery, what's the performance difference between using:
$('#somDiv').empty().append('text To Insert')
and
$('#somDiv').html('text To Insert')
?
$('#somDiv').html(value) is equivalent to $('#somDiv').empty().append(value).
Source: jQuery source.
.html will overwrite the contents of the DIV.
.append will add to the contents of the DIV.
difference between append() and html() in jQuery
.append() and .html() are the most useful methods in jQuery. But these are far different from one another, .append() add some value to the existing one. Where .html() do the same but it removes the old value first.
Here is an example:
<ul id="test">
<li>test</li>
</ul>
Now I will use .append() to add one <li>, For that I will write:
<script type="text/javascript>"
jQuery("#test").append("<li>test1</li>");
</script>
The output of this jQuery will be:
<ul id="test">
<li>test</li>
<li>test1</li>
</ul>
Now if I use .html() to add one <li>, For that I will write:
<script type="text/javascript>"
jQuery("#test").html("<li>test1</li>");
</script>
The output of this Script will be:
<ul id="test">
<li>test1</li>
</ul>
Here in this example .append() add one extra <li>, whether .html() removes the old one with new one. This is the main difference between .append() and .html() in jQuery.
In simple words:
$('#somDiv').append('blabla')
works like this:
<div id='somDiv'>some text</div>
becomes:
<div id='somDiv'>some textblabla</div>
And innerHTML replaces the contents, so it becomes this:
<div id='somDiv'>blabla</div>
The correct syntax is
$("#somDiv").html("<span>Hello world</span>");