We Keep Coding

Why can't I get the html content of this link?

I have a table with two links in each row, like this:
<table class="list">
...
<td>
756
</td>
<td>
some link
</td>
<td>some text</td>
<td>some more text</td>
...
</table>
The first link always has an ID, which starts with the same characters, followed by a random number. The second link does not have an ID. I would like to get the inner html of the first link when either link is clicked.
Demo here: http://codepen.io/sol_b/pen/XNqOgN
I have tried a few things using Jquery. This is what I have so far:
$('.list').find("a").click(function(){
$(this).each(function(){
if ($(this).attr('id') !=undefined) {
var number = $(this).html();
alert (number);
} else if ($(this).attr('id') == undefined) {
var number = $(this).prev('a').html();
alert (number);
}
})
});
This works for the first link, however it returns undefined for the second. I'm not sure why using .prev isn't working.
Any help much appreciated!
(note that I'm unable to change the HTML structure)

Do a single click event, go to the parent tr find the link with the id starting with "abcdefg", get the text
$('.list tr a').click(function(){
var text = $(this).closest('tr').find('a[id^="abcdefg"]').text();
console.log(text)
});
the demo: http://codepen.io/anon/pen/qqKrjE?editors=1111

Just use $('.list tr td a').first().html() to get the first link of the table.
So, that's all you need:
$(function(){
$('.list').find("a").click(function(){
if ($(this).attr('id') !=undefined) {//Links with id (1st column)
var number = $(this).html();//Get clicked link
alert (number);
} else if ($(this).attr('id') == undefined) {//Links with no id (2nd column)
var number = $('.list tr td a').first().html();//Get first link
alert (number);
}
});
})

.prev() returns previous adjacent sibling. If no previous sibling exists, or if the previous sibling element does not match a supplied selector, an empty jQuery object is returned.
In ur case changing .prev() to .parent().prev().children() will help.
http://codepen.io/anon/pen/XNYMNG?editors=1010

Your code will work with follow code,
$(function(){
$('.list').find("a").click(function(){
$(this).each(function(){
if ($(this).attr('id') !=undefined) {
var number = $(this).html();
alert (number);
} else if ($(this).attr('id') == undefined) {
//Little bit change here
var number = $(this).parent().prev().find('a').html();
alert (number);
}
})
});
})

When a link is clicked, you should go to the parent "tr", then select the first link in it, like this :
$(this).closest('tr').find('a').eq(0);
That way you'll always have the first link in the row you clicked.

try something like this -
$(document).ready(function () {
$('.list').find("a").click(function () {
if (this.id == "") {
alert(($($($($(this).parent()[0]).parent()[0]).children()[0]).children()[0]).innerHTML)
}
});
});

Removing rows from table

Assume we have table:
<table>
<tr>first</tr>
<tr class="ClassName">second</tr>
<tr class="ClassName">third</tr>
</table
And We want to remove row with class='ClassName'
I wrote a code:
var Ids = $('.ClassName').map(function () {
return this
}).get();
if (Ids.length > 0) {
for (var i; i = 0; i++) {
Ids[i].hide();
}
}
I need to know if there are any rows with this class. If yes I need to remove them. If no I call ajax, read from db and add rows to table. Its part of Show/Hide mechanism
But my code do nothing. Rows still appear in the page. What should I change?

jQuery
// check if are any rows with this class
var $rows = $('table tr.ClassName');
if( $rows.length > 0 ) {
// remove them or hide with .hide();
$rows.remove();
} else {
// call ajax ...
}

Why not just:
$('table tr.ClassName').hide();

if you want remove permanent then you can use this one.
$('.ClassName').each(function(){
$(this).remove();
});

Here you go -
$("table tr[class='ClassName']").remove();
Please mark this as "Answered" if this solves your problem.

Try using hasClass() in jquery.
JQuery:
//Check if any row has class
if($('table tr').hasClass("ClassName")){ //remove from table }
else{
//do your ajax call here.
}

You can just remove all with that class and then check if there was any:
$(function () {
var $trs = $('table tr.ClassName');
$trs.remove();
if ($trs.length === 0) {
// Ajax-call
}
});

It should work
$("table").find(".ClassName").remove();
If you want to remove all the table rows other than first row means you can try this
$("table").find("tr:gt(0)").remove();

Is there a way to know if the element is inside a table or a list?

I'm making a generic delete function that will delete a record and then delete the <tr> if the element is inside a <table>, or the <li> if it's inside a <ul>
The element can be in a list inside a table, so I need to know what parent element is closest.
Is there a way to find out this using jQuery?

If I understand you correctly, you want something like this:
if ($(this).closest('li').length) {
$(this).closest('li').remove();
} else { // must be in a table
$(this).closest('tr').remove();
};
http://api.jquery.com/closest
In the unlikely event your element is in a table inside a li, you need to be more creative:
if ($(this).closest('li').length) {
if ( $(this).closest('li').is($(this).closest('tr').closest('li')) ) {
// then we're in a table inside an li
$(this).closest('tr').remove();
} else {
$(this).closest('li').remove();
};
} else { // must be in a table
$(this).closest('tr').remove();
};
http://api.jquery.com/is

You can use closest() jQuery function.
function elementInTable(element) {
if (element.closest("table").length) return true;
return false;
}
Another solution is to search for each table and see if your element is in the table:
function elementInTable(element) {
element = $(element);
$("table").each(function () {
var currentTable = $(this);
if (currentTable.find(element).length) {
return true;
}
});
return false;
}
I guess it's not the best, but can be a solution.

if($(/*query*/).parent().is('table')){}
or if it's not a direct child
if($(target).parents('table').length > 0) {
//do something...
}

You can use the jquery.parents() function to retrieve the closest parent of a given selection:
$(myElemToDelete).parents('tr').remove();

There are several good answers on how to accomplish what you want, but I wonder about the initial premise... could you pass the id of the container to the function?
<li id="li_0">Some content <span class="delete" onclick="deleteRow('li_0')">Delete</span></li>
This would give your function flexibility to work in any structure. But, I don't know if that would really work for what you're wanting.

First,check whether the parent exist or not.
If it does,then check whether its input/tr or whatever element you want to delete and then remove.
if ($(event.target).parent('.selector').size() > 0)
{
$("#elementId").is("input")//or tr or whatever!!!
{
//your removal code
}
}

Hide table When there are no elements in its body

I have ajax link in my table which will delete elements on click. I want to make sure that when all the elements are deleted the table should hide itself. I cannot add any event on the ajax call. Meaning to say I cannot edit or change any ajax success or anyother parameter or function. I want something that will keep checking the table on its own and when there is no element in the table body hide the table and when an entry is made it will display its self

You could use setInterval() to repeatedly call a function to do the check for you. Then use the variation of .toggle() that takes a boolean:
setInterval(function() {
var $table = $('.tablesorter');
$table.toggle($table.find('tbody').children().length > 0);
}, 500);
That will check roughly twice every second (once every 500 milliseconds), you can change the second argument to increase or decrease the frequency of the check.

Here, for example the table class is named table
$('.table > tbody:empty').parent().hide();
For checking all the tables:
// Call the CheckTables function after 100 milliseconds
setInterval(CheckTables, 100);
function CheckTables()
{
$( "table " ).each(function( index ) {
$(this).find('tbody:empty').parent().hide();
$(this).find('tbody:not(:empty)').parent().show();
});
}

try this
$('.className> tbody:empty').parent().hide();
or
$('.className tr').each(function() {
if ($(this).find('td:empty').length) $(this).remove();
});​

Try this:
$(document).ajaxComplete(function() {
$('table').each(function(){
if($('tbody:empty',this))
$(this).hide();
else $(this).show();
});
});

Separate click event for first three td and last td not working in Dom change

I am having four column in my table. When we click one of the first three td that will do one operation and when we click last td that will do other kind of operation.
I did like this
$('#items_list tr td').not('#items_list tr td:last-child').click(function() {
// Do something
}
$("#items_list tr td:last-child").click(function() {
// Do something
}
But those not working when Dom change. I try to use .live(), but the disadvantage of li is
Chaining methods is not supported. Any one can guide me?

There is no need to add events to every cell on the table. One event handler at the table tbody level can handle it.
jQuery("#foo tbody").on("click", function (evt) {
var elem = jQuery( evt.srcElement || evt.target );
if (elem.is("td:last-child")) {
alert("last child");
} else {
alert("not last child");
}
});
You might have to add code to the elem to look for the closest td if you have elements inside of the td.
if (!elem.is("td")) {
elem = elem.closest("td");
}
jsFiddle

$("#items_list tr td").last().click(function(){ });