CODEWITHSUNDEEP
javascriptjqueryhtml
Jared Eitnier
Jared Eitnier

Reputation: 7152

Remove contents of element but preserve same children elements

I have:

<li class="parent">
  <a href="#">Text I WANT to remove</a>
  <ul>
    <li class="child">
      <a href="#">Text I DO NOT WANT to remove</a>
    </li>
  </ul>
</li>

How do I remove text from the parent's a element but not any of the childrens'?

EDIT: removed extra closing a tag for clarity.

Upvotes: 1

Views: 117

Answers (3)

Dips
Dips

Reputation: 3290

You can just use the following. This will remove all html elements inside a.

$(".parent a:first").html("");

Upvotes: 1

Ben Miller
Ben Miller

Reputation: 1484

First, your HTML is invalid. You have an extra closing anchor tag

Then you can do something like $(".parent a:first_child")

Check this out for more info: http://api.jquery.com/first-child-selector/

Upvotes: 1

Lix
Lix

Reputation: 47966

Try using the $("#element").text() function.

Just set it to an empty string :

$(".parent > a").text('');

I am using the > part of the selector to state that I want to use only the <a> tags that are direct children - that means they appear in the first level.

Reference : http://www.w3.org/TR/CSS2/selector.html#child-selectors

Upvotes: 4

Related Questions