Remove child objects from two parents in jQuery - javascript

I'm trying to remove parent tags from a list of links that are each inside a <p> and <span>
<p>
<span>
One
</span>
</p>
<p>
<span>
Two
</span>
</p>
↓
One
Two
jQuery:
$('p').each(function () {
$(this).html($(this).firstChild);
});
I've tried muliple ways of doing this but I just can't figure it out.

Assuming that the a tags will always be inside a single span and a single p tag you could call $("a").unwrap().unwrap(); You can learn more about .unwrap() here. I've included a working example below.
$("a").unwrap().unwrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<span>
One
</span>
</p>
<p>
<span>
Two
</span>
</p>

If you don't know the exact HTML structure of the a elements in relation to their parent p, you can extract the a elements and then remove() the p completely:
$('p').each(function() {
$(this).find('a').insertBefore(this);
$(this).remove();
});
Example fiddle
This has the benefit of working for any level of nested a element.

Related

How to remove div with a particular text in it

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>

jquery get All from element to element

Is there any way to select all elements from given elements to another given elements?
example:
<div>
<div>
<a name="break1"></a>
<p> belongs to break 1</p>
<div>
<p> belongs to break 1</p>
</div>
</div>
<p>belongs to break 1</p>
<div>
<a name="break2"></a>
<p> belongs to break 2</p>
<div>
<p> belongs to break 2</p>
<div>
<p> belongs to break 2</p>
</div>
</div>
</div>
</div>
we need something like the following:
$('[name*="break1"]').selectAllUntil('[name*="break2"]');
and result should be:
<p> belongs to break 1</p>
<div>
<p> belongs to break 1</p>
</div>
<p>belongs to break 1</p>
Most important thing: need to look down the siblings of each element up to the element matched by the selector, if we didnt find it we need to keep searching at the parent node
this can be misleading because we need to select all until the next element, even though the next element exist in the parent elements
Assuming the html is always the same you could try using prevAll().
Example:
$('.break2').parent().prevAll().css('color', 'blue');
https://jsfiddle.net/kt10r6n5/1/
Note:
If you are using a class like you have in your demo then this might be problematic if you have multiple instances of that same class. You would then have to find the last instance of that class. This will work better with an id of course.
Docs:
http://api.jquery.com/prevall/
I created method in plunker:
https://plnkr.co/edit/XUNCkYMJz4TEekLdBrJM?p=preview
This script returns jquery object with collection of elements between selector1 and selector2.
EDIT. Ok i got in now! It should work as expected.
IMPORTANT - script is working on level of selector parent, so is dependend to html structure.
jQuery.fn.extend({
selectAllUntil: function(selector) {
var currentDiv=this.parent("div");
var elements = $();//empty jquery collection
while(currentDiv.length){
if (currentDiv.find(selector).length){
//if our element have inside selector then this is end
return elements;
}else{
//no selector so add
elements= elements.add(currentDiv);
}
//next element
currentDiv=currentDiv.next();
}
}});
//usage:
$(function(){
var elements=$('[name*="break2"]').selectAllUntil('[name*="break4"]');
elements.css("color","red");
});

Jquery Find first direct child of a type

I am looking for a way to find the first direct child of an element, of a precise type.
Let's imagine this markup:
<div id="mainDiv">
<div id="otherDiv">
<p> Stuff </p>
</div>
<p> Stuff 2 </p>
<p> Stuff 3 </p>
</div>
So here, what I want to get is "Stuff 2" the first paragraph to be a direct child.
If using jquery I do something like $('#mainDiv').find('p:first'); I will get the paragraph inside the first div.
What I need is to ignore nested childs and take only the first direct one. How should I do that?
Use the direct descendant selector >
$('#mainDiv > p:first')
or even children()
$('#mainDiv').children('p').first()

Can't reach element by using a combination of .parent() and .next() methods

I'm binding the following function to a toggle button I have created to hide/unhide content that is located bellow the button, but on an other level in the DOM.
var togglelabel = packagehead.append("<div>").children().last().addClass("togglewrap").append("<label>")
.children().last().addClass("toggle android header-toggle")
.on('click', function(){
$(this).parent().parent().next('.hidable').toggle();
});
The html structure looks like this:
<div>
<div class="packageheader">
<span>Package #1501</span>
<div class="togglewrap">
<label class="toggle android header-toggle">
<input type="checkbox">
<p>
<span>More</span>
<span>Less</span>
</p>
<a class="slide-button">
</a>
</label>
</div>
</div>
<br>
<p class="hidable">
<pre>content here</pre>
</p>
</div>
This code doesn't work to hide the <p> with the class .hidable.
I've tried 'debugging' the code using console.log() to see what element 'this' represents and found that it does, as expected, represent the label element.
So I thought that using the following chain:
$(this).parent().parent().next('.hidable').toggle();
Would correctly go 2 levels up to the <div class="packageheader"> and then take the next sibling with the class hidable, which would be <p class="hidable">
Here is a screenshot of the structure, to be sure I didn't miss anything:
You can do this :
$(this).closest('.packageheader').nextAll('.hidable').first().toggle();
Note that it's slightly preferable to use closest instead of parent().parent() as it won't break as easily when the HTML changes and it's easier for the maintainer to decipher what the code does.
Note also that your HTML is invalid, you can't have a PRE inside a P.
Demonstration

Selecting <p> within a div using jQuery

I want to select the second <p> tag and style it within a itemize class div. Here is the example HTML:
<div class="itemize">
<p> Order Summery</p>
<div>
<p><strong>Packages:</strong> </p> <!-- i want to select this P tag-->
<p><strong>Date:</strong> </p>
<p><strong>Style:</strong> </p>
</div>
</div>
I want to select and style the first <p> which is immediately after the second <div>. The second <p> has no ID or class.
How can I select it via jQuery?
$('.itemize div p:first').html()
Check this link: http://jsfiddle.net/QJTYx/
If you want to add class to that p tag:
$('.itemize div p:first').addClass('selected');
You can do this way:
$('.itemize > div > p:eq(0)')
.itemize > div goes till:
<div class="itemize">
<p> Order Summery</p>
</div>
And
.itemize > div > p:eq(0)
<div class="itemize">
<p> Order Summery</p>
<div>
<p><strong>Packages:</strong> </p>
</div>
</div>
The > allows to target direct children whereas eq(index) is used to get first p that you want.
var test = $('.itemize')​.find('div:first')​.find(​'p:first')​​​.html();
alert(test);
​
Try here: http://jsfiddle.net/arvind07/H8vwA/
$('.itemize>div>p:first').addClass('someClass');
This should do the trick
$('.itemize div p').first().addClass('hello');
You can try this..
$(".itemize div p:first").text();
hope it will works..
$('.itemize>div>p').first().css(styles go here) most of the ones above work as well
jQuery selectors work a bit like css selectors, check out this tutorial to get more info.

Categories