CODEWITHSUNDEEP
javascript
Anthony Mitchell
Anthony Mitchell

Reputation: 1

Modify element when clicked

I apologize in advance if this is a basic question. I'm currently studying web development and trying to create stuff as I learn. My question is this, is there a way to style delete or otherwise modify an element without finding it based on an ID? The idea is that I will be creating a list. Either paragraphs list items or any number of elements. They will all be created in the same way and match in every way except the inner HTML will be different for each item. I know normally it would be easy to just getElementById or something but in this case they will all be the same. Any ideas would be great. I have tried researching any way of doing this within the spectrum of what I know so any links you could provide that would maybe teach me something knew to help with this would be wonderful.

Upvotes: 0

Views: 84

Answers (2)

mypsi
mypsi

Reputation: 113

If I understood correctly this could help you out.

Let's say you have a various number of elements like this in an unsorted list

<li class="similiarElements">Some Text</li>

They are different from one another just by the text displayed.

Now you can access those elements with a function like this:

 $("body").on("click", ".similiarElements", function () {
        //do something
    });

This is using JQuery, so if you are not familiar with this. You might want to check out their Documentation here.

Now with the $(this) selector you are able to access the element you clicked on. And will only manipulate that specific element.

$("body").on("click", ".similiarElements", function () {
        $(this).remove(); //removes Element
    });

This way you can pretty much manipulate that element in any way you want. Two more examples: 

$(this).css('color', 'red'); //changes text color to red
$(this).text("New Value"); //changes displayed text

You can try the above examples here: JSFiddle

Upvotes: 0

Sean Monroe
Sean Monroe

Reputation: 173

Your question says "modify when clicked", and that leads me towards that direction. Please rephrase if this ends up not being helpful.

The easiest way would be, in creating these <p> elements, add an additional onClick attribute.

<p onClick="DeleteMe(this)">

and later

function DeleteMe(oElement)
{
    oElement.parentNode.removeChild(oElement);
}

I'm using 'delete' as an example, but you can have clicking the element call a function, and pass this as an argument to refer to the element itself.

Upvotes: 1

Related Questions