Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #13493
| From | Matt McDonald <matt@fortybelow.ca> |
|---|---|
| Newsgroups | comp.lang.javascript |
| Subject | Re: jquery ,get the id of the input in order to delete input row? |
| Date | 2012-04-21 11:02 -0600 |
| Organization | A noiseless patient Spider |
| Message-ID | <jmup6f$ihr$1@dont-email.me> (permalink) |
| References | <94ebf0a1-856f-4357-b689-2622f641bb10@h10g2000pbi.googlegroups.com> |
On 12-04-20 12:39 PM, JRough wrote:
> $(function() {
> $(".btnDelete").click(function() {
> // get the id here
> var $id =this.id;
>
> // POST...
>
> return false;
> });
> });
Though using jQuery is in itself inadvisable, I'd like to
point out some flaws with the preceding snippet:
1. Class "selectors" such as ".btnDelete" are tar pits
speed-wise. Sizzle will recur the entire document tree
looking for results; most often, that's undesirable. Hooking
onto a common ancestor element via `document.getElementById`
or other methods (such as `HTMLCollection`s) is much more
reliable.
2. Your "to-do" list is semantically invalid. `<ul>` elements
*should* have strictly `<li>` elements as direct children[0]. I'd
suggest encapsulating these "list items" (read: form controls)
in a form. Furthermore, hook onto that form and use a property
such as `onclick`; this will facilitate event delegation
(one event handler instead of an infinite amount). Using a form
along with simple event delegation would be both semantically
valid and grant massive speed gains
(by leaving jQuery in the dust).
3. The usage of `$` to prefix a variable name is a convention
used by jQuery *implementers*¹ to denote a "cached" jQuery
object (e.g. `var $dumb = $(".dumb");`). Simply accessing
the `id` property of an element has nothing to do with jQuery.
Therefore, the "need" to prefix "$id" with "$"
is nonexistent.
4. I'd recommend avoiding the shorthand "document ready"
hack (i.e. `$(function () { [code] });`). This pattern
essentially involves passing a function to the jQuery
"constructor"/god function. A massive jQuery object is
returned (which "wraps" `document`)[1]. The "document ready"
non-problem can be avoided by placing `<script>` tags at the
end of the `<body>` element right before its closing tag
(e.g. `<script [...]></script></body>`).
By taking that advice, you'll have weaned yourself off of
jQuery and (should) be in complete control over your code.
> <section class="main"> 
> <input id="toggle-all" type="checkbox">
> <label for="toggle-all">Mark all as complete</label>
>
> <input type="checkbox" id="task" /> User Input to do item<input
> type="button" value="Delete" id="btnDelete />
>
> </section>
Once again, you are doing yourself a disservice by using form
controls outside of a form element. Controls such as
`<input [..] type="text">` are much easier to select from
inside of a form via the `HTMLFormElement::elements`
HTMLCollection[2]. If you do not wish for the form to be
"submittable", I'd suggest adding an attribute along the lines
of `onsubmit="return false;"`. This will displease the
"Unobtrusive Javascript [sic]" zealots, but is easy to
implement. Of course, that same property can be accessed
via the DOM as well if one desires "spotless" markup.
Another option would be to simply use
`<button [...] type="button">`, which makes more sense
outside of a form element as it does not alter a
form upon "activation".
[0]: http://www.w3.org/TR/html401/struct/lists.html#edef-LI
[1]: http://pastebin.com/NzS78ijd
[2]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-76728479
¹ I use the term "implementer" instead of "developer" as there
is very little "development" taking place when leaning on jQuery
to solve one's problems.
--
Matt McDonald: Web/Flash Developer; Edmonton, Alberta, Canada
Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread
jquery ,get the id of the input in order to delete input row? JRough <janis.rough@gmail.com> - 2012-04-20 11:39 -0700
Re: jquery ,get the id of the input in order to delete input row? Denis McMahon <denismfmcmahon@gmail.com> - 2012-04-21 01:23 +0000
Re: jquery ,get the id of the input in order to delete input row? Denis McMahon <denismfmcmahon@gmail.com> - 2012-04-21 02:18 +0000
Re: jquery ,get the id of the input in order to delete input row? Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2012-04-21 07:31 +0200
Re: jquery ,get the id of the input in order to delete input row? "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-04-21 06:09 +0000
Re: jquery ,get the id of the input in order to delete input row? JRough <janis.rough@gmail.com> - 2012-04-22 09:52 -0700
Re: jquery ,get the id of the input in order to delete input row? "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-04-23 10:32 +0000
Re: jquery ,get the id of the input in order to delete input row? JRough <janis.rough@gmail.com> - 2012-04-22 12:53 -0700
Re: jquery ,get the id of the input in order to delete input row? JRough <janis.rough@gmail.com> - 2012-04-22 13:03 -0700
Re: jquery ,get the id of the input in order to delete input row? JRough <janis.rough@gmail.com> - 2012-05-04 13:16 -0700
Re: jquery ,get the id of the input in order to delete input row? JRough <janis.rough@gmail.com> - 2012-04-22 09:50 -0700
Re: jquery ,get the id of the input in order to delete input row? Denis McMahon <denismfmcmahon@gmail.com> - 2012-04-23 02:10 +0000
Re: jquery ,get the id of the input in order to delete input row? John G Harris <john@nospam.demon.co.uk> - 2012-04-23 15:10 +0100
Re: jquery ,get the id of the input in order to delete input row? Barry Margolin <barmar@alum.mit.edu> - 2012-04-25 21:39 -0400
Re: jquery ,get the id of the input in order to delete input row? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-04-26 04:35 +0200
Re: jquery ,get the id of the input in order to delete input row? Andrew Poulos <ap_prog@hotmail.com> - 2012-04-26 15:49 +1000
ECMAScript Support Matrix (was: jquery ,get the id of the input in order to delete input row?) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-04-26 10:01 +0200
Re: ECMAScript Support Matrix Andrew Poulos <ap_prog@hotmail.com> - 2012-04-26 18:41 +1000
Re: ECMAScript Support Matrix Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-04-26 11:06 +0200
Re: ECMAScript Support Matrix Andrew Poulos <ap_prog@hotmail.com> - 2012-04-26 20:41 +1000
Re: jquery ,get the id of the input in order to delete input row? Andrew Poulos <ap_prog@hotmail.com> - 2012-04-26 12:38 +1000
Re: jquery ,get the id of the input in order to delete input row? Jukka Lahtinen <jtfjdehf@hotmail.com.invalid> - 2012-04-26 09:01 +0300
Re: jquery ,get the id of the input in order to delete input row? Andrew Poulos <ap_prog@hotmail.com> - 2012-04-26 16:16 +1000
Re: jquery ,get the id of the input in order to delete input row? Barry Margolin <barmar@alum.mit.edu> - 2012-04-26 06:52 -0400
Re: jquery ,get the id of the input in order to delete input row? John G Harris <john@nospam.demon.co.uk> - 2012-04-26 16:30 +0100
Re: jquery ,get the id of the input in order to delete input row? Barry Margolin <barmar@alum.mit.edu> - 2012-04-26 06:30 -0400
Re: jquery ,get the id of the input in order to delete input row? Andrew Poulos <ap_prog@hotmail.com> - 2012-04-26 20:44 +1000
Re: jquery ,get the id of the input in order to delete input row? Barry Margolin <barmar@alum.mit.edu> - 2012-04-26 08:34 -0400
Re: jquery ,get the id of the input in order to delete input row? John G Harris <john@nospam.demon.co.uk> - 2012-04-26 16:49 +0100
Re: jquery ,get the id of the input in order to delete input row? Gregor Kofler <usenet@gregorkofler.com> - 2012-04-26 18:08 +0200
Re: jquery ,get the id of the input in order to delete input row? Scott Sauyet <scott.sauyet@gmail.com> - 2012-04-27 13:29 -0700
Re: jquery ,get the id of the input in order to delete input row? Gregor Kofler <usenet@gregorkofler.com> - 2012-04-28 00:15 +0200
Re: jquery ,get the id of the input in order to delete input row? Dr J R Stockton <reply1217@merlyn.demon.co.uk.not.invalid> - 2012-04-27 21:41 +0100
Re: jquery ,get the id of the input in order to delete input row? Andrew Poulos <ap_prog@hotmail.com> - 2012-04-27 07:55 +1000
Re: jquery ,get the id of the input in order to delete input row? Matt McDonald <matt@fortybelow.ca> - 2012-04-26 22:23 -0600
Re: jquery ,get the id of the input in order to delete input row? Gregor Kofler <usenet@gregorkofler.com> - 2012-04-27 11:40 +0200
Re: jquery ,get the id of the input in order to delete input row? Andrew Poulos <ap_prog@hotmail.com> - 2012-04-27 20:05 +1000
Re: jquery ,get the id of the input in order to delete input row? "S.T." <anon@anon.com> - 2012-04-27 14:32 -0700
Re: jquery ,get the id of the input in order to delete input row? Andrew Poulos <ap_prog@hotmail.com> - 2012-04-28 16:03 +1000
Re: jquery ,get the id of the input in order to delete input row? David Mark <dmark.cinsoft@gmail.com> - 2012-07-05 19:52 -0700
Re: jquery ,get the id of the input in order to delete input row? David Mark <dmark.cinsoft@gmail.com> - 2012-07-06 00:53 -0700
Re: jquery ,get the id of the input in order to delete input row? "S.T." <anon@anon.com> - 2012-07-10 13:53 -0700
Re: jquery ,get the id of the input in order to delete input row? Matt McDonald <matt@fortybelow.ca> - 2012-07-10 18:32 -0600
Re: jquery ,get the id of the input in order to delete input row? "S.T." <anon@anon.com> - 2012-07-11 10:51 -0700
Re: jquery ,get the id of the input in order to delete input row? Gregor Kofler <usenet@gregorkofler.com> - 2012-04-28 17:41 +0200
Re: jquery ,get the id of the input in order to delete input row? "S.T." <anon@anon.com> - 2012-04-28 13:15 -0700
Re: jquery ,get the id of the input in order to delete input row? Gregor Kofler <usenet@gregorkofler.com> - 2012-04-28 22:45 +0200
Re: jquery ,get the id of the input in order to delete input row? Denis McMahon <denismfmcmahon@gmail.com> - 2012-04-21 14:28 +0000
Re: jquery ,get the id of the input in order to delete input row? JRough <janis.rough@gmail.com> - 2012-04-29 15:02 -0700
Re: jquery ,get the id of the input in order to delete input row? JRough <janis.rough@gmail.com> - 2012-04-22 12:34 -0700
Re: jquery ,get the id of the input in order to delete input row? Matt McDonald <matt@fortybelow.ca> - 2012-04-21 11:02 -0600
Re: jquery ,get the id of the input in order to delete input row? Denis McMahon <denismfmcmahon@gmail.com> - 2012-04-21 17:12 +0000
Re: jquery ,get the id of the input in order to delete input row? Matt McDonald <matt@fortybelow.ca> - 2012-04-21 11:37 -0600
Re: jquery ,get the id of the input in order to delete input row? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-04-21 20:59 +0200
Re: jquery ,get the id of the input in order to delete input row? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-04-21 20:46 +0200
csiph-web