Jquery remove parent div

Question

Please consider the following snippet:

<div class="row"> <div class="span12"> <div class="control-group"> <label class="control-label">Person Name</label> <div class="controls"> <input type="text" class="input-medium"> </div> </div> </div> </div> 

Classes belong to a grid-based css framework called bootstrap and are used for positioning and styling.

The "string" is inside the same form. The form provides entry for many people. Each "line" corresponds to one person with his input data. (in this example, I have only one property for simplicity - "Human Name"). Therefore, I can have many fragments / "lines" like this in one form.

What I would like to do is create a button that will be inside each line, and whenever it is pressed, it will delete the entire line in which it is located, but will not affect other lines belonging to other persons, the input .

As I understand it, the easiest option would be to use the jQuery'.remove method. However, this will require an enumeration of the identifiers of each line in this case, which I can create on the server side, but not in this case, just assume that this is unacceptable - I have no id attributes, and I can’t add them, so I I can not specify the function on the row identifier to delete. If I select a class for the ".remove" method, the button will obviously delete all lines.

Just to illustrate the situation. A few lines, pay attention to the buttons.

 <form> <div class="row"> <div class="span12"> <div class="control-group"> <label class="control-label">Person Name</label> <div class="controls"> <input type="text" class="input-medium"> </div> <div class="control-group"> <div class="controls"> <button type="button" onclick="deleteTheEntireRow()" class="btn btn primary">Delete Person</button> </div> </div> </div> </div> <div class="row"> <div class="span12"> <div class="control-group"> <label class="control-label">Person Name</label> <div class="controls"> <input type="text" class="input-medium"> </div> <div class="control-group"> <div class="controls"> <button type="button" onclick="deleteTheEntireRow()" class="btn btn primary">Delete Person</button> </div> </div> </div> </div> </form> 

Sorry for the formatting.

Essentially, what a button should do: detect and select only its fourth parent line, so I could use the ".remove" method.

Answer 1

 $("button").on("click", function(e) { $(this).closest("div.row").remove(); e.preventDefault(); });​ 

I remove the onclick property in HTML by

Demo

Answer 2

Add some class to each button, for example deleteRow , and then use:

 $(".deleteRow").on("click",function() { $(this).closest(".row").remove() }); 

Answer 3

HTML

 <table> <tr> <td>information</td> <td> <button onclick="removeRow(this)">Text</button> </td> </tr> <tr> <td>blah</td> <td> <button onclick="removeRow(this)">Text</button> </td> </tr> </table> 

Javascript

 removeRow = function(el) { $(el).parents("tr").remove() }