Forums | MacLife
You are not logged in.
#1 2009-04-04 4:58 pm
removeChild JavaScript question
hi
i want to remove input fields in a form onClick. having trouble with my script and hope someone can help me out.
Code:
<ol name="editlist">
<li name="item1" id="item1"><input type="text" maxlength="75" size="60" name="list[]" value="Watchmen (excellent piece of cinema - highly recommended) THURSDAY" /> <a href="#" onclick="function removeLine1(){ var list = 'editlist'; var item = 'item1'; item.parentNode.removeChild('item'); }">Remove</a></li>
<li name="item2" id="item2"><input type="text" maxlength="75" size="60" name="list[]" value="Law & Order (what can i say ... its always on some channel on cable)" /> <a href="#" onclick="function removeLine2(){ var list = 'editlist'; var item = 'item2'; item.parentNode.removeChild('item'); }">Remove</a></li>
<li name="item3" id="item3"><input type="text" maxlength="75" size="60" name="list[]" value="Man From Plains (documentary about Jimmy Carter) TEST" /> <a href="#" onclick="function removeLine3(){ var list = 'editlist'; var item = 'item3'; item.parentNode.removeChild('item'); }">Remove</a></li>
<li name="item4" id="item4"><input type="text" maxlength="75" size="60" name="list[]" value="South Park (i needed to turn my brain off) TEST" /> <a href="#" onclick="function removeLine4(){ var list = 'editlist'; var item = 'item4'; item.parentNode.removeChild('item'); }">Remove</a></li>
<li name="item5" id="item5"><input type="text" maxlength="75" size="60" name="list[]" value="The Ten (don't watch this if you're religious and easily offended)" /> <a href="#" onclick="function removeLine5(){ var list = 'editlist'; var item = 'item5'; item.parentNode.removeChild('item'); }">Remove</a></li>
</ol>i'm stuffing the JavaScript function into the <li> tag because i haven't seen an example of how to call a js function and pass a variable to it from a function call. i have two books here and neither show how to pass variables to a function. i was thinking something like onclick="removeLine(line#);" but i haven't had any luck with that
pre-emptive thanks to any/all who fell compelled to help. i'm a lot fonder of server side scripting than client side. i'm sure that's obvious
js code only
Code:
function removeLine()
{
var list = 'editlist';
var item = 'item1';
item.parentNode.removeChild('item');
}b
Last edited by b_dubb (2009-04-04 5:13 pm)
"The Fates lead he who will; he who won't, they drag." - Seneca
Offline
#3 2009-04-04 5:37 pm
Re: removeChild JavaScript question
onclick="return removeLine('item#');" is working for me now. passing to the function and printing an ALERT with the var from the function call
getting errors indicating that variables aren't being set
function removeLine(currLine)
{
item = currLine;
alert(item);
list = editlist;
list.parentNode.removeChild(item);
}
"The Fates lead he who will; he who won't, they drag." - Seneca
Offline
#4 2009-04-04 8:53 pm
Re: removeChild JavaScript question
You're referencing the ID, but not doing anything with it. You need some document.getElementById calls in there. Am I missing something?
Anyway, this should be better. Typed but not tested.
Code:
function remove (e) {
var li = e.parentNode;
li.parentNode.removeChild(li);
}Called like so:
Code:
<li>Foo! <a href="javascript:void(0);" onclick="remove(this);">Remove</a></li>
Basseq is me, John Whittet.
(Finishing the remainder of the thought expressed in the post has been left as an exercise for the reader.)
Offline
#5 2009-04-04 8:57 pm
Re: removeChild JavaScript question
JQuerified:
Code:
$(function(){
$('li').each(function(){
var li = $(this);
var rl = $('<a href="javascript:void(0);">Remove</a>');
li.append(rl);
rl.click(function(){ $(li).remove(); });
});
});Last edited by Basseq (2009-04-04 8:57 pm)
Basseq is me, John Whittet.
(Finishing the remainder of the thought expressed in the post has been left as an exercise for the reader.)
Offline
#6 2009-04-04 10:36 pm
Re: removeChild JavaScript question
Basseq wrote:
You need some document.getElementById calls in there. Am I missing something?
the '<li><input blah="blah" /</li>' is printed from by a while/do loop after a db query. each input field is named 'item'.++ and that's why i didn't go with a getElementById because each row has its own unique ID. am i making sense? oh blurgh
as i understand ( or misunderstand) things ... the Parent/Child model works like this ...
<ul> is a parent of <li>. so wouldn't i call the name of the <ul>/<ol> tag and then the name of the child node <li>?
Code:
<ul name="editlist">
<li name="item1"><input blah="blah" /><a href="javascript:void(0);" onclick="removeLine('item1');">Remove</a></li>
</ul>thanks
b
Last edited by b_dubb (2009-04-04 10:49 pm)
"The Fates lead he who will; he who won't, they drag." - Seneca
Offline
#7 2009-04-04 11:52 pm
Re: removeChild JavaScript question
soooo ....
removeLine(this); works as a function call. is (this) some kind of native js behavior? wierd
"The Fates lead he who will; he who won't, they drag." - Seneca
Offline
#8 2009-04-05 9:44 am
Re: removeChild JavaScript question
b_dubb wrote:
i didn't go with a getElementById because each row has its own unique ID.
IDs are by definition unique. You need to instruct Javascript on which DOM node to select (based on ID) using document.getElementById. Otherwise the ID you're passing is just a string and the function has no idea what to do with it.
as i understand ( or misunderstand) things ... the Parent/Child model works like this ...
<ul> is a parent of <li>. so wouldn't i call the name of the <ul>/<ol> tag and then the name of the child node <li>?
That's correct, but you lost me on the second part. In order to remove the desired li node? Yes.
removeLine(this); works as a function call. is (this) some kind of native js behavior?
Think of the DOM a little like a OO class, here. When you click on a DOM node, it throws the onclick event for that node. As such, 'this' is a representation of the DOM node you just clicked. We can pass this directly into another function for manipulation.
In my code, 'this' represents the anchor tag. The parent node of that anchor tag is the li tag we want to remove. To remove it, we walk up one more level to ul/ol and remove it using removeChild().
Basseq is me, John Whittet.
(Finishing the remainder of the thought expressed in the post has been left as an exercise for the reader.)
Offline
