Item list add/remove

[Leozack]

Hi all
Been spending some time today fiddling with a little list system for personal use.
Basically I just want a webpage where I can add rows (textboxes) to various sections (working) and remove specific rows (can't manage to position an icon for it next to/over text box).
Also the rows per section all have the same name/id ending in [] so that when submitted they are an array my PHP can work with. But this doesn't suit the JS wanting to remove specific ones if they have the same name, tied to specific icons by that row with a delete icon. But adding them as infinite rows/textboxes as samename[] works fine.
I've got myself too wound up around this now so thought I'd see what the obvious solution is from you smart chaps


_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[ChrisHirst]

Does each element have a unique id?

Other than that we need to see your code.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Leozack]

Currently they don't, as when I add them my js adds a new one with id/name of samename[] so that it doesn't matter how many there are they all end up in an array called samename when submitted to php.
If I have to give them all unique numbers then I'll have to be keeping track of that the whole time which I was trying to avoid. Though removing them without it seems near impossible unless I can get some kind of 'this' action going on it which I'm not sure how to do because clicking the textbox is obviously for editing it so not sure how else I could convey wanting to delete it other than an icon which I'm struggling to layer next to it/on it and link it somehow?

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[Leozack]

For instance, right now the JS that adds a row in says this

document.getElementById(username+'list').innerHTML += "<input type='textbox' id='"+username+"[]' name='"+username+"[]' class='userlist' value=''>

and the textboxes in html look like this

<img src="add.png" class="add" title="Add Item" onClick="AddItem('<? echo $_SESSION['username']; ?>');">
input type='textbox' id='<? echo $_SESSION['username']; ?>[]' name='<? echo $_SESSION['username']; ?>[]' class='userlist' value=' <? echo $userlista[$n]; ?>'>

Which is fine. But if I need to have a way to remove the lines/textboxes that are being added, that's when I get unstuck :|

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[ChrisHirst]

The ID attribute value HAS to be unique in the document otherwise javascript cannot reference the element independently.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Leozack]

Exactly. And right now it doesn't have to, so it's fine. But if I want to remove an element, then it will have to. That means I need to start keeping track of all the numbered IDs being added or removed, and my PHP needs to join them into an array or handle looping through the numbers properly. It's starting to sound like like a shopping cart system in my head now. Eitherway there must be some basic setup people have already used to have JS providing interactivity to add/remove items from a list which can then be handled by PHP?
It's times like this I wish I knew jquery and ajax - but sadly not.

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[ChrisHirst]

You don't need jquery or ajax for that, just a unique reference to the object, so you can use the object self-reference of 'this.id' to identify the object you want to delete from the DOM tree.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Leozack]

Well like I said I was having trouble trying to find a way to float an icon over the end of it or next to it to click on to delete it - cos the textbox itself can't have a method to delete itself as it just takes input :|

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[ChrisHirst]

Why do you not use the DOM methods to insert the item?

You have more control that way than using innerHTML to just plant them in there.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Leozack]

It's been a while since I had to do anything like this, so I'm not familiar with the methods you're probably suggesting. Any guides/tuts I can follow would be great thanks - taking some downtime while sick to look into this stuff

_________________________________
Leozack

MakeUniverse($infinity,1,42);

 

[ChrisHirst]

http://www.javascriptkit.com/javatutors/dom2.shtml

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum