Jquery Get Text of Nested Selector not child - javascript

How To Access keyword-text e.g java On click keyword-remove class.
First Of all it's outside keyword-remove scope can not use $(this).
I want to access nested selector span text.
<span class="keyword">
<span class="keyword-remove"></span>
<span class="keyword-text">java</span>
</span>
$(document).on("click",".keyword-remove", function(){
});

As the click event is on the span, it cannot be empty. If it is empty you cannot click it. After entering some data in the span select the sibling span using the siblings function and print the textContent. Alternatively .next can be used instead of siblings
$(document).on("click",".keyword-remove", function(){
console.log($(this).siblings('span')[0].textContent)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="keyword"><span class="keyword-remove">First span </span><span class="keyword-text">java</span></span>

use next() to select the next sibling of the element you clicked.
$(document).on("click",".keyword-remove", function(){
console.log($(this).next('.keyword-text').text())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="keyword">
<span class="keyword-remove">REMOVE</span>
<span class="keyword-text">java</span>
</span>

You can use the following code block -
$(document).on("click",".keyword-remove", function(){
console.log($(this).next().find('.keyword-text').text())
});
Working Example -
https://jsfiddle.net/0wmnxdrp/1/

Personally I would use closest() paired with a following find(). The reason being, this removes the positional logic from the equation, and you only rely on the parent child relationship.
$(document).on("click",".keyword-remove", function(){
console.log($(this).closest('.keyword').find('.keyword-text').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="keyword">
<span class="keyword-remove">X</span>
<span class="keyword-text">java</span>
</span>

Related

Bind click event for parent using child element's id

I want to bind a click event on parent element using child element's id.
I have this:
<span class='k-link'>
<div id='myDiv'> </div>
</span>
<span class='k-link'>
<div id='myDiv2'> </div>
</span>
I want to do this:
$("#myDiv:parent").click(function() { }); //Does not work as expected
$("#myDiv2:parent").click(function() { }); //Does not work as expected
However, this does not result in the desired behavior, and the click event only works when clicked on myDiv and not on span.
I have no control over span, I can only give id to the div, how can I bind a click event for the myDiv's parent (which is a span tag).
Is this possible?
Use parent() method like following.
$("#myDiv").parent().click(function() {
alert('OK');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='k-link'>
<div id='myDiv'>DIV</div>
</span>

Remove child objects from two parents in jQuery

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.

How do I delete the next two siblings and ONLY the next two siblings in this pop-up using jQuery?

So I have a popup. You click on an "+Add Text" link and it adds a text box to the page, along with another "+Add Text link" and an "x" in a span on the right corner of each textbox. When I click an "x" within this popup, I'd like for it to delete the two siblings that immediately follow it. The HTML generated on the page looks something like this...
<div class="popup">
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
</div>
When I click the divs with the class "delete-text-box-x">, I'd like for the following two siblings to be deleted. That is, the following corresponding textarea and "+Add Text" span.
I almost have it. Here is my jQuery
$('.delete-text-box-x').click(_.bind(function(e){
$('.delete-text-box-x').nextUntil('.add-textbox').remove();
}, this));
}
It's obvious why this doesn't work. The nextUntil method does indeed select and remove the textboxes following the 'X' divs. But the selector selects EVERY 'X' on the page, and therefore deletes EVERY textbox on the page. It also doesn't delete the '+Add Textbox' spans...
So how do I get more specific than the current selector I'm using? So it selects ONLY the specific 'X' I click, rather than every 'X' on the page.
Firstly, you need to base the selector on the element that raised the event using the this keyword. From there you can use nextUntil(), but you should use the selector of the next X so that all the required elements are found. Finally you need to use add() to include the clicked X itself. Try this:
$('.delete-text-box-x').click(function (e) {
$(this).nextUntil('.delete-text-box-x').add(this).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup">
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
<div class="delete-text-box-x">X</div>
<textarea class="textbox"></textarea>
<span class="add-textbox">+Add text</span>
</div>
I also note you're using some odd syntax around the anonymous function in the click handler which I presume this is due to another library. If not you should remove it.
This until works to find another element in the siblings, so in the above code you are selecting the next add-textbox and not the next X icon.
$('.delete-text-box-x').click(function() {
$(this).nextUntil('.delete-text-box-x')add(this).remove();
});

CSS or jQuery Selector for span within span

I am trying to select a span within a span within a div using plain CSS or JQuery selectors. The html is as follows:
<div id="example2_paginate" class="dataTables_paginate paging_full_numbers">
<span id="example2_first" class="first paginate_button paginate_button_disabled">First</span>
<span id="example2_previous" class="previous paginate_button paginate_button_disabled">Previous</span>
<span>
<span class="paginate_active">1</span>
<span class="paginate_button">2</span>
<span class="paginate_button">3</span>
<span class="paginate_button">4</span>
<span class="paginate_button">5</span>
</span>
<span id="example2_next" class="next paginate_button">Next</span>
<span id="example2_last" class="last paginate_button">Last</span>
</div>
I want to select spans that contain 1 to 5 (paginate_active and the 5 paginate buttons), individually.
With my very limited knowledge of CSS and jQuery I've tried a couple of things but I'm sure my syntax is wrong, like $("paging_full_numbers span:eq(1)") .
Could you please give me a hint of how to go about it?
To select them individually, you can simply select them all and then use jQuerys .each(). For example
spanList = $('#example2_paginate').find('.paginate_active, .paginate_button');
will find all classes of 'paginate_active' or 'paginate_button' that, are inside your element of id=example2_paginate. Then you can write:
spanList.each(function(index){
<-- code here for occurence of index index-->
});
Alternatively to select the i^th button without looping through them all:
spanList.eq(i)
See jsFiddle: http://jsfiddle.net/t4KWr/
This CSS is what you want.
div.paging_full_numbers > span > span.paginate_active, div.paging_full_numbers > span > span.paginate_button
A quick way to get, say, the third of the 5 spans would be:
$(".paging_full_numbers > span > span:nth-child(3)")
its seem that there is a problem with
$("paging_full_numbers span:eq(1)")
You should write like
$("#paging_full_numbers span:eq(1)")
Or if you are using class
$(".paging_full_numbers span:eq(1)")
This select spans that contain 1 to 5 (paginate_active and the 5 paginate buttons), individually:
$("div.paging_full_numbers span:[class='paginate_active'],[class='paginate_button']").each(function(){
//do what you want here
});
That select the span's with only class 'paginate_active' or only class 'paginate_button'

problem: jQuery click event only works on first occurrence in text

I have this code:
<span id="Santiago4">Santiago</span>
<br>more html code here<br>
<span id="Santiago4">Santiago</span>
<script>
jQuery("#Santiago4").click(function() {alert("blabla")} );
</script>
My problem is that when I click on the html text on first occurence, the click event triggers the alert pops up. But when I click the second occurrence (or any other if Santiago appears a few times in the text) nothing happens.
Why is that? Why when clicking the second span element that it also has the id: Stantiago4 the function's code does not run?
Thanks in advance.
Element ID attributes are intended to be unique. If you want to share attributes, rather use the class attribute:
<span class="santiago4">Santiago</span>
<br/>more html code here<br/>
<span class="santiago4">Santiago2</span>
In other words, instead of id, use class. Then the jQuery would be:
jQuery(".santiago4").click(function() {
alert("clicked!")
});
Now the click event will be bound to all HTML elements with the class 'santiago4', which is what you are looking for.
ID should be unique across the HTML elements.
You can instead assign a common classname to each of the span and the use .classname as jQuery selector.
Try this:
<span class="Santiago4">Santiago</span> <br/>
more html code here<br/>
<span class="Santiago4">Santiago</span>
<script>
jQuery(function(){
jQuery(".Santiago4").click(function() {
alert("blabla")
});
});
</script>
You can't have more than one element with the same Id, these need to be distinct. For the usage you are describing you need to use another selector such as a class:
<span class="Santiago4">Santiago</span>
<br>more html code here<br>
<span class="Santiago4">Santiago</span>
<script>
jQuery(".Santiago4").click(function() {alert("blabla")} );
</script>
Change it to use a class because as Andrew said, you can't have more than one element with the same ID:
<span class="Santiago4">Santiago</span>
<br>more html code here<br>
<span class="Santiago4">Santiago</span>
<script>
jQuery(".Santiago4").click(function() {alert("blabla"); } );
</script>
Working JS Example
They both have the same ID, which isnt' good HTML and will cause problems when trying to manipulate with jQuery. Try using the class name instead:
<span class="Santiago4">Santiago</span> <br>more html code here<br> <span class="Santiago4">Santiago</span> <script>jQuery(".Santiago4").click(function() {alert("blabla")} );</script>

Categories