1

I am trying to remove a certain table row in a string. For instance, I have the code below in a string. Lets call the variable that stores the string below temp

<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>

I have several buttons with id's corresponding to the number of row above. If I click the first button it has a corresponding id of 1, the second button has 2, etc.

What I am getting at is that if I hit these delete buttons, I want to remove the corresponding table row above based on what id (button) I click.

Here is my code so far.

$(".delete").click(function() {
   var id = $(this).attr("id");
   var temp = $("#detailsBox").val();

   for (i=1; i!=id; i++) {
     if (i=1) {

     }
   }

  $(this).closest('tr').remove();

}

How would I delete a part of that string in my variable temp based off of the id(button) I click? If I choose button 1, I want to delete the first table row. Button two, second table row, etc. I know I need to replace the string, but how do I remove certain instances within the string?

wowzuzz
  • 1,398
  • 11
  • 31
  • 51
  • That for loop is very unsafe. In the instance that id isn't a number > 1, that loop may never end. – crush Jun 03 '13 at 16:22
  • 1
    The id will always be a number greater then 1. – wowzuzz Jun 03 '13 at 16:23
  • 1
    You could split the string into an array by end of line character (probably `\n\r`) and then use `Array.splice` to remove the appropriate lines from the string. When you are finished use `Array.join` to put them back into a string. If you can't guarantee the rows/cells will always be on new lines, then you might want to convert it into a DOM object, remove it, then save it back to a string. – crush Jun 03 '13 at 16:24
  • Unless another script modifies the `id` attribute. The biggest problem with that loop is the `i != id`. If `id` is undefined, for example, that loop never ends. – crush Jun 03 '13 at 16:26
  • I am getting the id off of a each loop earlier in the script from the index of how many tags I find fyi. – wowzuzz Jun 03 '13 at 16:27
  • It looks to me like you are getting it from an element in the DOM with the class `.delete` that is being clicked. – crush Jun 03 '13 at 16:28
  • You would be right. Beforehand though, I am bringing that id to that particular button through an each loop. – wowzuzz Jun 03 '13 at 16:29
  • Why do you have the the rows in a string variable? If you give us more details about what you are trying to achieve, we might provide you a better solution. – Mifeet Jun 03 '13 at 16:58
  • I have the rows in a string variable because its coming from a textarea elements value in a form. The html gets added to this textarea. – wowzuzz Jun 03 '13 at 16:59
  • @wowzuzz I updated my answer with jQuery solution. Look at the fiddle I made. – thinklinux Jun 03 '13 at 17:17
  • @wowzuzz ok, that helped. String entered by a user is not safe (a missing `>` or anything). You should use the browser to parse the string and manipulate the resulting DOM - see my answer. It also has the advantage that if you need a different manipulation with the string in the future, you can implement it very easily. – Mifeet Jun 03 '13 at 17:28
  • @thinklinux I'll look at the solution now. Thanks for your help. – wowzuzz Jun 03 '13 at 17:49

5 Answers5

1

You are trying to use jQuery as if that elements are in DOM... and they are not. They are just one string. So you can do something like that:

var arr = yourString.split("<tr>");

$(".delete").click(function() {
 var id = $(this).attr("id");
 arr = arr.splice(parceInt(id, 10)-1, 1);
}

Now you have array with the right TRs inside. All you have to do is to convert them to string again:

var htmlString;
for (var i=0; i<arr.length; i++) {
  htmlString += arr[i];
}

UPDATE jQuery WAY You can do it with jQuery too. Look at the fiddle

http://jsfiddle.net/J6HJ2/2/

thinklinux
  • 1,287
  • 9
  • 13
1

Parsing HTML is dangerous. Therefore I suggest you convert your string to DOM and then manipulate on the DOM tree.

Here is a simple solution with jQuery:

var row = 1; // the row I want to remove
var temp = $("#myTextarea").value(); // get HTML

var table = $("<tbody>" + temp + "<tbody>"); // creates DOM nodes from HTML
table.find("tr").eq(row - 1).remove();
var tempWithoutRow = table[0].innerHTML;

Try yourself in JSFiddle.

Community
  • 1
  • 1
Mifeet
  • 12,949
  • 5
  • 60
  • 108
  • I didn't realize that find would return back an array with a key of 0. – wowzuzz Jun 03 '13 at 20:58
  • 1
    It actually returns a `jQuery` object which behaves like an array. See description [here](http://api.jquery.com/Types/#jQuery). – Mifeet Jun 03 '13 at 21:55
0

You can select all the table rows and then filter down to the one you want:

$(".delete").click(function() {
    var id = $(this).attr("id");
    $("#my-table").find("tr").eq(id + 1).remove();//since your IDs are not zero-indexed and .eq() is
});
Jasper
  • 75,717
  • 14
  • 151
  • 146
0
$(".delete").click(function() {
   var id = $(this).attr("id");
   var temp = $("#detailsBox").val();

   for (i=1; i!=id; i++) {
     if (i=1) {

     }
   }

  $(this).parentNode.remove();

}

if the .delete is on the td

else if u have <td><button class="delete"></button></td>

then it's $(this).parentNode.parentNode.remove();

no need for the id if the button is inside the <tr>

cocco
  • 16,442
  • 7
  • 62
  • 77
-1

Easy solution would be to give the rows meaningful ID's and use the following code:

$(".delete").click(function() {
  $('#row' + $(this).id).remove();
}

If you really want to count nameless TR elements in a string you could split them into an array with split("<tr>")

Jonathan
  • 8,771
  • 4
  • 41
  • 78
  • Yeah, that would be a wise idea. The problem is though is there are tons of these table rows already made by a previous developer that don't have an id attribute. That would be very time consuming considering there are lots of table rows without ID's. – wowzuzz Jun 03 '13 at 16:55