Jquery .remove() on tr

[mongoose00318]

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');
}

 

[mongoose00318]

😐 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 () {
					
				});

			});

 

[requinix]

exit isn't a thing in Javascript. You're killing the event callback by trying to call a function that doesn't exist. It's an error.

Use return.

[mongoose00318]

Awesome. Good call. Thank you man.

[requinix]

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 April 29, 2020 by requinix
I always forget about hasClass

[mongoose00318]

Can I still this $(this) if I remove the second argument?

[requinix]

You mean can you write

$(this)

like you're already doing in other parts of the code?

[mongoose00318]

Well sort of...I mean does it inherit the object assigned to $(this) from the outside code unless you redefine it later and can you redefine the object assigned to $(this)? Did I phrase that right?

Edited April 29, 2020 by mongoose00318

[requinix]

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.

[mongoose00318]

Awesome. Thanks for the clarity & insight! I will look into it some more.