Jump to content

Jquery .remove() on tr


mongoose00318

Recommended Posts

I’m trying to remove a the row below the row which the function is called within; if the the next row has a class of “compare-results”. My code works fine except for the remove(). It alerts within the code block but won’t delete the row…

     //compare changes buttons
		$('.compare-change', this).click(function() {
			
			var buttonText = $(this).text();
			if (buttonText == 'Compare') {
				$(this).text('Hide');
			} else {
				$resultsRow = $(this).closest('tr').next();
				
				if ($resultsRow.attr('class') == 'compare-results') {
					$resultsRow.remove();
					alert('hellow');
				}
				$(this).text('Compare');   
			}
			
			var callerCellIndex = $(this).prevAll().length; //current cell index
			var callerCellRow = $(this).closest('tr'); //current row of caller cell
			var callerPrevRow = callerCellRow.prev(); //row before caller cell
			var resultsRowHTML = '<tr class="compare-results"><th scope="row"></th><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
			
			// create new row to display results in
			callerCellRow.after(resultsRowHTML);
			
			//loop through each cell in callerCellRow
			$(callerCellRow.children('td:not(:last)'), this).each(function () {
				
			});

		});

This is the problem area:

if ($resultsRow.attr('class') == 'compare-results') {
    $resultsRow.remove();
    alert('hellow');
}

 

Link to comment
Share on other sites

😐 I figured it out. Sorry, it was a stupid mistake on my part. This fixed it.

//compare changes buttons
			$('body').on('click', '.compare-change', function() {
			//$('.compare-change', this).click(function() {
				
				var buttonText = $(this).text();
				if (buttonText == 'Compare') {
					$(this).text('Hide');
				} else {
					$resultsRow = $(this).closest('tr').next();
					
					if ($resultsRow.attr('class') == 'compare-results') {
						$resultsRow.remove();
						$(this).text('Compare'); 
						exit();
						//alert('hellow');
					}
					  
				}
				
				var callerCellIndex = $(this).prevAll().length; //current cell index
				var callerCellRow = $(this).closest('tr'); //current row of caller cell
				var callerPrevRow = callerCellRow.prev(); //row before caller cell
				var resultsRowHTML = '<tr class="compare-results"><th scope="row"></th><td>test</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
				
				// create new row to display results in
				callerCellRow.after(resultsRowHTML);
				
				//loop through each cell in callerCellRow
				$(callerCellRow.children('td:not(:last)'), this).each(function () {
					
				});

			});

 

Link to comment
Share on other sites

By the way, some quick feedback:

- Don't use the text of the button to decide what it should do. Use a class. Or a data attribute.
- attr(class) gives you the value of that attribute. It does not test for the presence of a class. What if you added another one? Use .hasClass(compare-results) or .is(.compare-results).
- $(callerCellRow children, this) is weird. I'm not even sure what jQuery whether would ignore the second argument or transform the first into a selector, but the docs probably answer that.

Edited by requinix
I always forget about hasClass
Link to comment
Share on other sites

I don't know what you're trying to say so... probably not.

Every time a function runs, it has a this. It is not inherited like you think - it's not a variable like that. Instead, what it is depends on how the function is called. It's kinda weird like that.

The main function here is the callback for the click event. jQuery is the one calling your function and according to the docs:

Quote

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching selector. (Note that this may not be equal to event.target if the event has bubbled from a descendant element.) To create a jQuery object from the element so that it can be used with jQuery methods, use $( this ).

So it will be the .compare-change button. But only for code written directly inside this callback function.

Later when you do the .each, inside that function the this is not inherited. As before, it depends on how the function was called. And as before, jQuery is the one calling your function, so you should consult the docs:

Quote

Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

Thus inside that function the this will be each element being iterated over.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.