I want to delete a row when i click the glyphicon-trash. I tried many ways but still cant get row index properly.
<table class="table table-bordered" id="table_GemList">
<thead>
<col style="width: 25%">
<col style="width: 25%">
<col style="width: 25%">
<col style="width: 25%">
</thead>
<tbody id="GemListBody">
<tr>
<td>Oval</td>
<td>Red</td>
<td>2.23</td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
<tr>
<td>Box</td>
<td>Pink</td>
<td>2.23</td>
<td><span class="glyphicon glyphicon-trash"></span></td>
</tr>
</tbody>
</table>
---------- My code
$(document).on("click", ".glyphicon-trash", function () {
var d = $(this).parentNode.parentNode.rowIndex;
document.getElementById("table_GemList").deleteRow(d);
});
$(this) returns a jQuery object. You can't directly read the properties of the collection's items that way. In fact you shouldn't wrap the element with the jQuery constructor as you don't want to use the jQuery APIs.
var d = this.parentNode.parentNode.rowIndex;
Since you are using jQuery, you can simply use the closest and remove methods.
$(this).closest('tr').remove();
You need to update
var d = $(this).parentNode.parentNode.rowIndex;
document.getElementById("table_GemList").deleteRow(d);
to
$(this).closest("tr").remove();
For reference on closest() - https://api.jquery.com/closest/
For reference on remove() - https://api.jquery.com/remove/
Maybe this helps....
$(document).on("click", ".glyphicon-trash", function ()
{
$(this).closest("tr").remove(); // remove row
});
This should works.
$(document).on("click", ".glyphicon-trash", function () {
$(this).parents('tr:first').remove();
});
you can simply delete the parent in which trash icons is there by below jquery code
$(document).on("click", ".glyphicon-trash", function (){
$(this).parent().parent().remove(); // remove row
});
Related
Let's say I have a button in a table which adds a new row to a table:
<td><a onclick="addRow()"></a></td></tr>...
and I want to reference $(this) or $(this).closest('tr') from the function at the bottom of the page.
function addRow(){
$(this) // contains all information from the row which pressed the button
}
Simply passing a javascript variable from the HTML will result in null (as expected). Is there a way to reference the row that pressed the button?
The RECOMMENDED way of doing this is unobtrusive and delegated - give the link a class:
var $tb = $("#someTable");
$tb.on("click", ".addRow", function(e) { // delegation to allow new rows' links to work
e.preventDefault(); // stop any click side effects
var $row = $(this).closest("tr");
$tb.append($row.clone())
});
a { text-decoration:none }
td,th { padding:3px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>Add</th>
</tr>
</thead>
<tbody id="someTable">
<tr>
<td>1st</td>
<td>2nd</td>
<td><a class="addRow" href="#">+</a></td>
</tr>
<tr>
<td>3rd</td>
<td>4th</td>
<td><a class="addRow" href="#">+</a></td>
</tr>
</tbody>
</table>
Use this
<td><a onclick="addRow(this)"></a></td></tr>
and then:
function addRow(e){
console.log($(e)) // contains all information from the row which pressed the button
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a onclick="addRow(this)">Clickme</a>
You can reference the row that you clicked using an event.
<td>Add</td>
and in javascript you can check the event
<script>
function addRow(event) {
console.log(event);
}
</script>
When it reaches the line this.parentNode.removeChild(this);
I get the error
this.parentNode is undefined
In the debugger I pause at the beginning of that statement and see that "this" is: Object[ tr#CMD01.selected ] which is exactly what I expect. How is parentNode undefined? I have done a lot of searching for similar problems here and keep finding cases where "this" is not correct, but in my case it is verified by the debugger.
$(document).ready(function() {
$.fn.deleteThisRow = function() {
this.parentNode.removeChild(this);
};
});
function deleteRow() {
$("#theList tr.selected").deleteThisRow();
}
.selected {
background-color: yellow
}
<body>
<center id='bg'>
<table id="cmdList">
<thead>
<tr id="hdrow">
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody id="theList">
<tr id="CMD00">
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr id="CMD01" class="selected">
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr id="CMD02">
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</tbody>
</table>
<table id="buttons">
<tr>
<td>
<button onclick='deleteRow()'>Delete</button>
</td>
</tr>
</table>
</center>
</body>
When you implement a jQuery method, the value of this when it is called will be the jQuery object, not the DOM object. So, this.parentNode does not exist because a jQuery object does not have a property by that name.
You can either use jQuery's .parent() or you can get the actual DOM node and then use .parentNode on that.
If you only intend on ever processing a single DOM object at a time, you can do this:
$.fn.deleteThisRow = function() {
this[0].parentNode.removeChild(this[0]);
};
If your jQuery object may have multiple objects in it, then you can do this:
$.fn.deleteThisRow = function() {
this.remove();
};
Or, as you may notice, you don't even need a custom method for this. If you have a jQuery object for the row, you can just call .remove() on it directly.
function deleteRow() {
$("#theList tr.selected").remove();
}
I have a table tr and td. In between the table data there is a span that I want to take the ID from.
In my jquery code, it's not returning any value from span id.
How can get span id?
My HTML
<table border="1" id="t1">
<tr>
<td>
<span class="f1" id="111" onclick="subtract();">Subtract</span>
</td>
</tr>
<tr>
<td>
<span class="f2" id="222" onclick="subtract();">Subtract</span>
</td>
</tr>
</table>
My jQuery
$(document).ready(function() {
$("#t1 span").click(function() {
var a = $(this).id();
alert(a);
});
});
Use jQuery's attr method:
var a = $(this).attr('id');
This allows you to take any attribute from any jQuery object element and return its value.
More info in the jQuery attr() Docs
You can simply pass the this in your subtract function:
function subtract(element) {
var a = element.id
console.log(a);
}
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1" onclick="subtract(this);">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2" onclick="subtract(this);">Subtract</span></td>
</tr>
</table>
Another solution is using jQuery .attr():
$('table#t1 span').click(function() {
var a = $(this).attr('id');
console.log(a);
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2">Subtract</span></td>
</tr>
</table>
You can use id property of Element
var a = this.id;
in jQuery, us the attr function to get attributed from HTML elements. http://api.jquery.com/attr/
See working example using your code: https://jsfiddle.net/e2vonuor/
The problem is that you're chaining a non-existent method to a jQuery's $(this) object, id is neither a function nor a method, in either jQuery or DOM: it's a property, of an HTMLElement. So, instead use a valid jQuery method to retrieve the property:
$(document).ready(function () {
$("#t1 span").click(function () {
var a = $(this).prop('id');
alert(a);
});
});
Although you could, certainly, also use attr() in place of prop():
$(document).ready(function () {
$("#t1 span").click(function () {
var a = $(this).attr('id');
alert(a);
});
});
Or use the DOM:
$(document).ready(function () {
$("#t1 span").click(function () {
var a = this.id;
alert(a);
});
});
You either use the inline "onclick" in which case you can send the actual element as a parameter:
<table id="t1" border="1">
<tr>
<td><span id="111" class="f1" onclick="subtract(this);">Subtract</span></td>
</tr>
<tr>
<td><span id="222" class="f2" onclick="subtract(this);">Subtract</span></td>
</tr>
jQuery
function substract(spanElement){
var id = $(spanElement).attr("id");
alert(id);
}
Or you set the click functionality in the document ready:
$(document).ready(function () {
$("#t1 span").click(function () {
var id = $(this).attr("id");
alert(a);
});
});
I also recommend you debug using console.log instead of the alert function. But this is a matter of preference.
How do I get the index of clicked item in the code below?
$('selector').click(function (event) {
// get index in collection of the clicked item ...
});
With Firebug I saw this: jQuery151017197709735298827: 2 (I've clicked in the second element).
This will alert the index of the clicked selector (starting with 0 for the first):
$('selector').click(function(){
alert( $('selector').index(this) );
});
$('selector').click(function (event) {
alert($(this).index());
});
jsfiddle
Siblings
$(this).index() can be used to get the index of the clicked element if the elements are siblings.
<div id="container">
1
2
3
4
</div>
$('#container').on('click', 'a', function() {
console.log($(this).index());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
1
2
3
4
</div>
Not siblings
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
Pass the selector to the index(selector).
$(this).index(selector);
Example:
Find the index of the <a> element that is clicked.
<tr>
<td>0001</td>
</tr>
<tr>
<td>0002</td>
</tr>
<tr>
<td>0003</td>
</tr>
<tr>
<td>0004</td>
</tr>
Fiddle
$('#table').on('click', '.adwa', function() {
console.log($(this).index(".adwa"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>vendor id</th>
</tr>
</thead>
<tbody>
<tr>
<td>0001</td>
</tr>
<tr>
<td>0002</td>
</tr>
<tr>
<td>0003</td>
</tr>
<tr>
<td>0004</td>
</tr>
</tbody>
</table>
Just do this way:-
$('ul li').on('click', function(e) {
alert($(this).index());
});
OR
$('ul li').click(function() {
alert($(this).index());
});
check this out
https://forum.jquery.com/topic/get-index-of-same-class-element-on-click
then
http://jsfiddle.net/me2loveit2/d6rFM/2/
var index = $('selector').index(this);
console.log(index)
if you are using .bind(this), try this:
let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);
$(this.pagination).find("a").on('click', function(evt) {
let index = Array.from(evt.target.parentElement.children).indexOf(evt.target);
this.goTo(index);
}.bind(this))
<script type="text/javascript">
$(".inventory-notes").bind("click", function() {
if($(this).text().length > 0) {
alert($(this).text());
alert($(this).closest(".inventory-notes").children().text());
}
});
</script>
example table
<table id="inventory" class="table">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Usage</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr class="items">
<td>Hatchet</td>
<td>24,000 Gold</td>
<td>Woodcutting</td>
<td><div class="inventory-notes"><div id="299"><img src="addnotes.png"></div></div></td>
</tr>
</tbody>
</table>
How can I get the value 299 from the child div of inventory-notes? The table really contains at least 1,000 rows of items each containing a random ID.
I am using jQuery 1.6.2 so I cannot use the .on() function.
Since you're using jQuery 1.6.2, I'd use .delegate:
$("#inventory").delegate(".inventory-notes", "click", function(){
var id = $(this).find("div").prop("id");
});
Since you're going to have 1,000+ rows, you don't want to bind the event to the actual rows, resulting in 1,000+ handlers.