How to get the rowIndex of a div element clicked - javascript

I want to get the rowIndex of the <div> I clicked.
<div id="parent" onClick="this.click()">
<div id="1">
<span text="22"></span>
</div>
<div id="2"><span text="32"></span></div>
<div id="3"><span text="232"></span></div>
<div id="4"><span text="242"></span></div>
<div id="5"><span text="252"></span></div>
</div>
I'm at a stage where I get the <div> I have clicked, lets say I have:
<div id="3"><span text="232"></div>
How can I get the id and the value of the text in the <span> inside that <div>?

Add an event handler to the container (#parent) using Element.addEventListener(). When the handler is triggered, check if the event target is a span Element.matches().
If it is, get the id from the parent node (the div), and the text attribute from the span, using Element.getAttribute():
var container = document.getElementById('parent');
container.addEventListener('click', function(e) {
if (!e.target.matches('#parent > div > span')) return;
var id = e.target.parentNode.id;
var text = e.target.getAttribute('text');
console.log(id, text);
});
<div id="parent">
<div id="1">
<span text="22">1</span>
</div>
<div id="2"><span text="32">2</span></div>
<div id="3"><span text="232">3</span></div>
<div id="4"><span text="242">4</span></div>
<div id="5"><span text="252">5</span></div>
</div>

If you are using Jquery, this will work [Tested]:
$("#parent").find('span').each(function(){
$(this).on('click', function(){
console.log($(this).parent().attr('id'));
});
});
Let me know if any issues with this

Related

Count parent child child nodes

So I want to know how do I get count of parent child child childs for example:
const parent = document.querySelectorAll('.parent');
parent.forEach(el => {
const ul = el.querySelector('.child3-child');
const div = document.createElement('div');
div.textContent = ul.childNodes.length;
el.append(div);
});
<div class="parent">
<div class="child1">
text
</div>
<div class="child2">
text
</div>
<div class="child3">
<ul class="child3-child">
<li>
some text...
</li>
<ul>
</div>
</div>
And now I want count how many <ul class="child3-child"> has child elements in this case it has only 1 li.
Use children instead of childNodes. The former includes HTML Elements while the latter includes text nodes.
Close your </ul> tag properly or else the borwser will think it's opening a nested element.
const parent = document.querySelectorAll('.parent');
parent.forEach(el => {
const ul = el.querySelector('.child3-child');
const div = document.createElement('div');
div.textContent = ul.children.length;
el.append(div);
});
<div class="parent">
<div class="child1">
text
</div>
<div class="child2">
text
</div>
<div class="child3">
<ul class="child3-child">
<li>
some text...
</li>
</ul> <!--- This wasn't properly closed -->
</div>
</div>

jQuery element removal

I want to remove an element using jQuery.
HTML:
<div class="listContainer" id="listContainer">
<div class="listItem">
<div class="name">
Item Name
</div>
<div class="amount">
<input type="text" class="amountInput" />
</div>
<div class="delete">
<div class="deleteBtn">
X
</div>
</div>
</div>
</div>
There are several listItemss on the page and each of the listItem will be created dynamically using jQuery. I want to delete amountInput of specific listItem by clicking the deleteBtn, so I tried doing:
$("#listContainer").on("click", ".deleteBtn", function() {
$(this).closest(".amountInput").remove();
});
This doesn't work. But on the other hand if I try to delete a listItem as a whole, the code works:
$("#listContainer").on("click", ".deleteBtn", function() {
$(this).closest(".listItem").remove();
});
Why is this happening?
Thanks.
Because .closest propagates to the top of the HTML. So it searches for the first parent that matches your selector. That is why it cannot find .amountInput. Because it isn't a parent of your button.
To get .amountInput you have to:
$("#listContainer").on("click", ".deleteBtn", function() {
$(this).closest(".listItem").find('.amountInput').remove();
});
This will get the wrapping .listItem element and then search it for the .amountInput element.
Your selector is not correct, use find instead of closest could be helpful in this case, also $(this) in your sample is related to deleteBtn class not to listContainer.
$("#listContainer").on("click", ".deleteBtn", function() {
console.log($(this)) // this here is .deleteBtn not listContainer
$(this).closest(".listItem").find(".amountInput").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="listContainer" id="listContainer">
<div class="listItem">
<div class="name">
Item Name
</div>
<div class="amount">
<input type="text" class="amountInput" />
</div>
<div class="delete">
<div class="deleteBtn">
X
</div>
</div>
</div>
</div>

Click event in plain JavaScript

How to know the id of current Html element when clicking on a Html element using plain JavaScript?
<div id="myId">
<div>
<h2>First Div</h2>
</div>
<div>
<h2>Second Div</h2>
</div>
</div>
I would like to catch "myId" while I am clicking on the body of this div. That means I would like to get the ID of parent div when I click on First Div and Second Div.
My JS code is like below.
document.onclick = function(e) {
alert(e.target.id)
}
You can do that in the following way:
var div = document.getElementById('myId');
div.addEventListener('click', function(e){
console.log(this.getAttribute('id'))
});
<div id="myId">
<div>
<h2>First Div</h2>
</div>
<div>
<h2>Second Div</h2>
</div>
</div>
event.currentTarget will be the dom element that the event is triggered by.
You can just write a function:
function showid(elem) {
var id = elem.id
console.log(id)
alert(id)
}
And in your HTML code:
<div id="myId" onclick="showid(this)">
<div>
<h2>First Div</h2>
</div>
<div>
<h2>Second Div</h2>
</div>
</div>
You can do it like this in vanilla JS, register an event handler on the document and retrieve the id of the clicked element:
document.addEventListener("click", function(e){
alert(e.srcElement.id);
});
<p id="paragraph1">First Paragraph</p>
<button id="myButton">Click Me</button>

jquery get value of next instance of class

I am trying to use jQuery to get the value of the divs with the classes of more_details_con, more_details_desc and more_details_res and when edit_entry is clicked but I don't think I am traversing the DOM correctly because the alert just says undefined.
The HTML
<div class="details">
<span class="id">1234</span>
<span class="contact">account name</span>
</div>
<div class = "more_details">
<div class = "more_details_btns">
<div class="go_account">Go to Account</div>
<div class="edit_entry">Edit</div>
<div class="delete_entry">Delete</div>
</div>
<div class="container">
<div class="more_details_title">Contact:</div>
<div class="more_details_con">Contact name</div>
<p class="clear"></p>
</div>
<div class="container">
<div class="more_details_title">Description:</div>
<div class="more_details_desc">Actual Description</div>
<p class="clear">
</div>
<div class="container">
<div class="more_details_title">Resolution:</div>
<div class="more_details_res">Actual Resolution</div>
<p class="clear">
</div>
</div>
The jQuery I've tried
$("#results").on("click", ".edit_entry", function() {
var contact = $(this).next(".more_details_con").html();
var desc = $(this).next(".more_details_desc").html();
var res = $(this).next(".more_details_res").html();
alert(contact+desc+res);
});
The issue is because the elements you're looking for are not siblings of the one which raised the event. You instead could use closest() to find the nearest common parent element, .more_details, and then find() to get the element you want. Try this:
$("#results").on("click", ".edit_entry", function() {
var $parent = $(this).closest('.more_details');
var contact = $parent.find(".more_details_con").text();
var desc = $parent.find(".more_details_desc").text();
var res = $parent.find(".more_details_res").text();
console.log(contact, desc, res);
});

copy existing event handler to new appended div

I want to create new element on clicking on '.new' element, my jQuery works but button '.new' in newly created element is not clickable, and cannot create next element. How can I fix it.
I guess I cannot just use .copy(true) , because the element is not exactly the same - the h2 is not copied.
<div class="step">
<h2>Some text we don't want to copy</h2>
<div class="new"><i class="icon-plus"></i></div>
</div>
<div class="step">
<h2>Some text we don't want to copy</h2>
<div class="new"><i class="icon-plus"></i></div>
</div>
<div class="step">
<h2>Some text we don't want to copy</h2>
<div class="new"><i class="icon-plus"></i></div>
</div>
This is my jQuery which doesn't pass the function to .new element:
$('.new').click(function(){
var newSlideDiv = $('<div class="step slide"><h2>New Step</h2>
<div class="new"><i class="icon-plus"></i></div>
</div>');
$(this).parent().after(newSlideDiv);
});
delegated event handlers:
$(document).on('click', '.new', function(){
var newSlideDiv = $('<div class="step slide"><h2>New Step</h2>
<div class="new"><i class="icon-plus"></i></div>
</div>');
$(this).parent().after(newSlideDiv);
});

Categories