We Keep Coding

Jquery: After removing content with a click how do I reset the button with the one I triggered the add function?

So I have this function where I add content on click to a "Favorites page", but when I click the button to remove it from the Favorites tab it removes the content but the button on the main page does not reset, the question is, how do I reset the button to it's original state after clicking the "Unfavorite" button?
https://jsfiddle.net/yjL7L6g7/3/
$(document).ready(function() {
$('button').click(function() {
if ($(this).html() == 'Favorite') {
var $favorited = $(this).parent().parent().parent().clone();
$(this).html('Favorited');
$favorited.find('button').html('Unfavorite');
$($favorited).click(function() {
$(this).remove();
});
$('#favorites').append($favorited);
}
});
});
And my second question related to this code is, how do I add a button to be on the same row with the content that is being added to the "Favorites"? I tried a simple .append(); but it did not suffice as the button got placed in a new row, will .css() suffice?
The questions might be stupid but I am still on my first steps in learning jquery

I'd avoid cloning if possible because there are simpler ways to do what you're trying to do. The code below will create a new button and add it to your favorites page. It will also attach an event to the Remove button to change the text of the Favorited button as well as remove itself after being clicked.
$(document).ready(function () {
$('button').click(function () {
if ($(this).html() == 'Favorite') {
var that = this;
$(this).html('Favorited');
var id = $(this).attr('id');
$('#favorites').append('<button id="' + id + 'Remove" class="ui-btn">Remove</button>');
$('#' + id + 'Remove').click(function () {
$(this).remove();
$(that).html('Favorite');
});
}
});
});
As for your second question, there is CSS that allows elements to live on the same line. For example, if you have two buttons that you want on the same line, it would look something like this:
<button style="display: inline;">Button1</button>
<button style="display: inline;">Button2</button>
Let me know if you have any questions.

Click handler for element with highest z-index only

In a page I'm creating there are some WebGrid components serving as master grids, and on clicking a row, a details area is shown. Now every row shall also have a delete button, so that clicking this button, the row is deleted.
Now because I have a click handler for #myGrid tbody tr, and the button (which is actually just an image) is inside the tr, both click handlers are executed when I click on the button. What can I do to prevent this and just execute the click handler for the button, that is, for the "top" element?
Here is a jsFiddle roughly demonstrating what I'm currently doing
Is there an elegant way to do this, or is there maybe an alternative to what I'm currently doing?
For reference, here's some even shorter sample code. HTML:
<table id="tbl">
<tr>
<td><img src="someImage.png" class="delete-button" /></td>
</tr>
</table>
JavaScript:
$(document).ready(function () {
$("#tbl tr").click(function () {
alert("row click");
});
$(".delete-button").click(function () {
alert("delete-button click");
});
})

Use stopPropagation
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$(".delete-button").click(function (e) {
// ^
alert("delete-button click");
e.stopPropagation();
// ^^^^^^^^^^^^^^^^
});
https://jsfiddle.net/tusharj/nbvdw0q1/3/
Docs: http://api.jquery.com/event.stopPropagation/

You simply need to stop the propagation of the click event of the elements containing the button:
$(".delete-button").click(function (event) {
alert("delete-button click");
event.stopPropagation();
});
Updated fiddle.

You can just capture the parent click then compare the event target against the delete button.
(Demo)
$("#tbl tr").hover(function() {
$(this).toggleClass("clickable");
}).click(function(e) {
if ($(e.target) === $('.delete-button')) {
alert("delete-button click");
} else {
alert("row click");
}
});

Unable to add class or id to button in jquery .append() method to make a button that works

instead of running delete function, i wont to run the button class
$("#app-table").append("<tr><td>"+sernumb+"</td><td>"+person.name1+"</td><td>"+parseInt(person.rollno)+"</td><td>"+person.address+"</td><td><button id='sideb"+r_index+"' type='button' onclick='delete_row(this);'>Delete</button></td></tr>"); // delete button to be added
});
$("#btn2del").click(function () {
$("#app-table tr:last").remove();
});
$("#row1del").click(function () {
$("#app-table tr:nth-child(1)").remove(); // deleting everything but the mentioned item in not
});
$("#delete-c").click(function(){
alert("Its Working");
});
});
function delete_row(ele){
var index=$(this).parent().parent().index();
$("#app-table tr").eq(index).remove(); // deleting current row
}

You can delete row by :
function delete_row(ele){
var parent_tr=$(this).closest('tr').remove();// deleting current row
}

jQuery first click addClass, second click redirect

I am trying to build a temporary (and fake) form validation.
On the form, if you click submit the first time, it adds a class of ".error" and a span to the required inputs. If you click submit again, I want it to redirect to another page.
I can't seem to figure out how to have two different functions on the same submit button. The first click needs to add a class, the second click should redirect.
Here's my code:
if($("button").hasClass('redirect')){
$("button").click(function(){
window.location.href="index.html";
});
} else {
$("button").click(function(){
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
});
}

you can do like this:
$("button").click(function(){
if(!$(this).hasClass('redirect'))
{
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
}
else
{
window.location.href="index.html";
}
});

maybe you should just use the same function? something like that :
$("button").click(function(){
if($("button").hasClass('redirect')){
window.location.href="index.html";
} else {
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
});
}

$("button").click(function(){
if($("button").hasClass('redirect')){
window.location.href="index.html";
} else {
$(this).addClass("redirect");
$("input:required").addClass('error');
$("<small class=error>Invalid entry.</small>").insertAfter("input:required");
}
});

dynamically added class can't be called

I am trying to accomplish delete in page which is filled with data by ajax call.
my page has this before data is loaded:
<span id="ShowSelectedCategories"></span>
and after ajax call i fill with below info:
function(data){
$('#ShowSelectedCategories').prepend(' x <span style="color:red">' + data +'</span> &nbsp ');
}
and finally after click i want to remove clicked element but it doesn't work.
$(function(){
$("#ShowSelectedCategories").click(function(e){
e.target.outerHTML //this is the part i want to remove after click
e.preventDefault();
})
I have tried $(".DeleteCat).click() but this gave error because elements with that class was created dynamically.
Your help is appreciated

Try $(e.target).remove(),
$("#ShowSelectedCategories").click(function(e){
$(e.target).remove();
e.preventDefault();
});
If you want to delete element with class DeleteCat within span with id ShowSelectedCategories then you can do it like this,
$("#ShowSelectedCategories").on("click", "DeleteCat" function(e){
$(this).remove();
e.preventDefault();
});

$('#ShowSelectedCategories').on('click', '.DeleteCat', function(e){
$(this).remove();
e.preventDefault();
});
http://jsfiddle.net/Dj5NQ/

Use something like this to call dynamically added class
$('.class').live("click", function(){
$('#id').remove();
});