Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

My code does not remove Email us text from the work with us element when stick-end event takes place?

I don't want to add class to the anchor tag , instead I want to remove it using its name as selector ie $JquerObject.remove(a) as shown below, however it is not working. This takes place in sticky plugin challenge of using Jqoery plugin course.

$(".animsition").animsition({ inClass: 'fade-in-right-lg', outClass: 'fade-out-right-lg', linkElement: 'header a', inDuration: 1000, outDuration: 500 });

$(".header").sticky({ getWidthFrom: '.container', responsiveWidth: true });

$(".header").on('sticky-start',function(){ $(".description").html('we build <strong>great</strong> apps'); })

$(".header").on('sticky-end',function(){ $(".description").html('we build apps'); })

$(".grid-full h5").sticky({ topSpacing:60, getWidthFrom: '.container', responsiveWidth: true });

$(".grid-full h5").on( 'sticky-start',function(){ $(this).append('<a href="http://youtube.com">Email us</a>'); })

$(".grid-full h5").on( 'sticky-end',function(){ $(this).remove('a'); })

attached is the html: I want to remove the anchor tag which I an dynamically adding to this tag <h5>Want us to work on your project?</h5> in the js file "<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Agency - A Treehouse template</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--CSS--> <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.min.css"> <link rel="stylesheet" href="js/animsition/animsition.min.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="row container animsition"> <header class="row header"> <div class="grid-third"> <a href="index.html" class="logo animsition-link"></a> </div> <div class="grid-third"> <h1 class="description">We build apps</h1> </div> <div class="grid-third"> <nav> <a href="index.html" class="animsition-link">Home</a> <a href="#" class="active animsition-link">Work</a> <a href="team.html" class="animsition-link">Team</a> </nav> </div> </header><!--/header--> <div class="row"> <div class="grid-full"> <h2>Our Work</h2> <h4>Here’s a collection of our latest app builds</h4> <h5>Want us to work on your project?</h5> </div> <div class="grid-half item"> <div class="frame blue"> <img src="img/slide-dailyFeed.png" alt="" /> </div> <h3>DailyFeed</h3> <p>Your number one podcast app</p> <a href="#" class="button">View Project</a> </div> <div class="grid-half item"> <div class="frame orange"> <img src="img/slide-chitChat.png" alt="" /> </div> <h3>ChitChat</h3> <p>The worldest easiest to use cross device chat app</p> <a href="#" class="button">View Project</a> </div> <div class="grid-half item"> <div class="frame green"> <img src="img/slide-mixTape.png" alt="" /> </div> <h3>MixTape</h3> <p>An app to search, create and share mixtapes</p> <a href="#" class="button">View Project</a> </div> <div class="grid-half item"> <div class="frame yellow"> <img src="img/slide-kitt.png" alt="" /> </div> <h3>KITT</h3> <p>Turn your car into KITT from Knight Rider</p> <a href="#" class="button">View Project</a> </div> </div><!--/main--> <footer> <div class="row"> <div class="grid-full"> <p>Connect with us</p> <ul class="social"> <li> <a href="#" class="pink"></a> <a href="#" class="light-blue"></a> <a href="#" class="dark-blue"></a> </li> </ul> </div> </div> </footer><!--/footer--> </div> </body> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/animsition/jquery.animsition.min.js"></script> <script src="js/sticky/jquery.sticky.js"></script> <script src="js/main.js"></script> </html> "

2 Answers

I got the answer I wrongly assumed that remove(selector) is used to selectively remove the children of the presently selected object instead it is to filter out only those objects that has the selector.

The solution to my problem was thus $(this).children().remove();

jag
jag
18,266 Points
// To remove a class you do
$(selector).removeClass('classname')


// To remove tags
$(selector).remove(tag)