how to remove the element with defined value from the list?

Question

I would like to create a javascript function to remove an element from the list. The (unfinished) function is the following:

function removeUser(gData) {
        var divUsers = document.getElementById('users');
        console.log(divUsers);
        var userId = gdata.Id(); //the element with this value should be removed from the list - e.g. if userId == 21367, 'Silvana' should be removed.
        divUsers.remove(userId);
}

the divUsers looks like the following:

<ul id="users">
<li data-bind="text :FirstName, click:AddOwnerToUser.bind($data), value: Id" style="cursor:pointer" value="21367">Silvana</li>
<li data-bind="text :FirstName, click:AddOwnerToUser.bind($data), value: Id" style="cursor:pointer" value="23295">John</li>
</ul>

As a javascript newbie I would be very thankful if anyone could tell how to get the right element by its id and remove it.

Thanks!

Possible duplicate of http://stackoverflow.com/questions/3387427/remove-element-by-id?rq=1 — Aaron D, Jan 11 '15 at 13:15
Based on the `data-bind` you seem to be using some sort of data binding framework (angular, knockout, etc), you should be using the tools given to you by those frameworks, and not mess with the DOM directly. — Madara's Ghost, Jan 11 '15 at 13:15
@RoyiNamir Why the hell would he use jQuery just to remove an element from the DOM? — Madara's Ghost, Jan 11 '15 at 13:16
@SecondRikudo because jQuery is powerful with manipulating DOM , crossbrowser , elegantly . — Royi Namir, Jan 11 '15 at 13:18
@RoyiNamir jQuery is powerful with cross browser DOM. If you don't need IE9 or less support, jQuery really adds no benefits. — Madara's Ghost, Jan 11 '15 at 13:19
@RoyiNamir Including jquery just to remove an element shows ignorance, not elegance. — Zirak, Jan 11 '15 at 13:20
@Zirak Yes. if it's only for removing element. but later on- you need to add/get data-* , and later you need to find via complicated selector and then ajax , and then you find your code with both vanilla js functions (which already exists in jq) and jq. and then you ask yourself - how did I get here? — Royi Namir, Jan 11 '15 at 13:22
@RoyiNamir I'd rather not argue for/against jquery in this comment section. If you'd like, do come over to the [javascript room](http://chat.stackoverflow.com/rooms/17/javascript), me and others will be happy to discuss it. — Zirak, Jan 11 '15 at 13:27
http://chat.stackoverflow.com/transcript/message/20897124#20897124 — Zirak, Jan 11 '15 at 13:40

score 1 · Accepted Answer · answered Jan 11 '15 at 13:19

You could use attribute selector [attribute=value] in Element.querySelector, and Element.removeChild to do what you intend to..

function removeUser(gData) {
   var divUsers = document.getElementById('users');
   console.log(divUsers);
   var userId = gdata.Id(); 
   divUsers.removeChild(divUsers.querySelector('[value=' + userId + ']'))
}

The above is how you remove the element as is asked in your question. Do take care if it affects any possible frameworks you'll be using as the first comment to my answer states.

Again, given that he has `data-bind` attributes on his elements, it's likely that OP is using a framework, and doing that will interfere. — Madara's Ghost, Jan 11 '15 at 13:21

how to remove the element with defined value from the list?

1 Answers1