CODEWITHSUNDEEP
prototypejsprototype
Deepak Mallah
Deepak Mallah

Reputation: 4076

prototype : onclick remove previous element

i have html as below in which onclick of <a> i want to remove the text box above it.

<input class="sku-box" class="input-text validate-number" type="text" title="file-number" name="sku[]">
<a value="remove" onclick="remove()" href="javascript:void(0);">remove</a>
<input class="sku-box" class="input-text validate-number" type="text" title="file-number" name="sku[]">
<a value="remove" onclick="remove()" href="javascript:void(0);">remove</a>

my solution to this, i changed the <a> tag to this.

<a href="javascript:void(0);" onclick="removefield(this)" value="remove">remove</a>

and my prototype function look like this

function removefield(ele)
{
    $(ele).previous().remove();
    ele.remove();
}

Upvotes: 0

Views: 486

Answers (1)

kstubs
kstubs

Reputation: 808

You have several options for observing click events, and usually I wire up click events after the dom is loaded using something like:

document.on('click', 'a', myFunction.BindAsEventListener())

The above statement sets you up for observing all click events occurring for the a element firing up the function myFunction. Once you have this established you can then either trap the event or simply allow it to bubble up or do both, trap and bubble up the event.

However, with the direction you are going there you would be better off to pass the identity of your a tag to the remove function, then it is easy to remove the previous element. So you would have: 

<a id="a_tag1" value="remove" onclick="remove('a_tag1')" href="javascript:void(0);">remove</a>

Then your function remove might look something like this:

function remove(a) {
    // prev element
    var elm = $(a).previous('input');

   // remove it
    if(elm)
      elm.remove();
}

This is very basic and in reality you would need to do things to guarantee that the previous input element you are grabbing is associated with the a element you clicked. You could do this by agreeing on a new data-xxxx element tag or an arbitrary class name you can use to compare the elements. For example, your a tag might look like:

<a data-group='monkeys'>...</a>

And the cooresponding input tag might look like:

<input data-group='monkeys'>...</input>

Then, in the above code where you call previous on the a tag, you would construct your select to include a test on the data-group value that matches the current a tag.

Karl..

Upvotes: 1

Related Questions