Search jQuery

jQuery Forum

Using jQuery

soujiro07..

active changes id values by clicking a button, using "attr"

in Using jQuery • 11 years ago

Hi. I have a list of text input fields, which can be added and moved freely by clicking buttons.

They are like

write1 [text: ] [up] [down] [delete]

write2 [text: ] [up] [down] [delete]

...

[button: add text input field]

[up] [down] buttons move the corresponding text fields accordingly. [delete] button is obviously to remove the text input area together with up, down, and delete buttons.

Certainly, if I delete a line in the middle like below, the order of "id" attributes is now messed up.

write1 [text: ] [up] [down] [delete] (id="num1")

~~write2 [text: ] [up] [down] [delete] (id="num2")~~

write3 [text: ] [up] [down] [delete] (id="num3")

But I wish to reorganize the "id" attributes accordingly. Of course, similarly for up and down buttons.

write1 [text: ] [up] [down] [delete] (id="num1")

write2 [text: ] [up] [down] [delete] (id="num2")

So, I need to implement jQuery code so that every button click updates all id values.

I tried...

<tr>
<td><input type="text" name="c_change" class="choice_input" id="num1"/></td>
<td><button class="up">up</button> <button class="down">down</button></td>
<td><button class="deleteButton">delete</button></td>
</tr>
$('.deleteButton').live('click',function(event){
$(this).parent().parent().remove();

$('.choice_input').removeAttr('id');
$(".choice_input").attr("id", function (arr) {
return "num" + arr;
})
});
// up
$('.up').live('click',function(event){
var own = $(this).parent().parent();
var pre = own.prev();
own.insertBefore(pre);
});

for the delete and up buttons, hoping that removeAttr() removes all id attributes. But it does not.

Could anyone give me tips?

Replies(2)

jakecigar

Re: active changes id values by clicking a button, using "attr"

11 years ago

Reassigning id’s when aren’t used or needs, seems like a waste of processor cycles. But this code should do it. I left in a console.log to see that it actually does reAssignIdNumbers.

You don’t have to remove attributes when in the next line you set it.

function reAssignIdNumbers(){
$(".choice_input").attr("id", function (arr) {return "num" + (arr+1)})
console.log($(".choice_input"))
}
$('.deleteButton').live('click',function(event){
$(this).parent().parent().remove();
reAssignIdNumbers()
});
$('.up').live('click',function(event){
var own = $(this).parent().parent();
own.insertBefore(own.prev());
reAssignIdNumbers()
});
$('.down').live('click',function(event){
var own = $(this).parent().parent();
own.insertAfter(own.next());
reAssignIdNumbers()
});

JΛ̊KE

Response title

Attachments

jQuery Forum

active changes id values by clicking a button, using "attr"

Replies(2)

Re: active changes id values by clicking a button, using "attr"

Re: active changes id values by clicking a button, using "attr"

Statistics

Tags

Actions