remove hyperlinks from the selected li - javascript

I'm trying to remove all hyperlinks from the selected li with jquery but doesn't seems to work properly. When is clicked all my hyperlinks getting removed. A detaliet view of my code http://jsfiddle.net/78kAu/1/. The event what is firing the code looks as it follows
$('a').click(function(){
var selected = $(this).attr('class');
var row = $('.elements li').length;
alert(selected);
$("a").remove();
});

Instead of
$("a").remove();
you want:
$(this).remove();
What you've got says "find all the <a> elements on the page, and remove each of them."
If you want to remove all the <a> elements from some container above the clicked element, like an <li>, you'd do this:
$(this).closest('li').find('a').remove();

Related

Append Jquery Object into HTML element

I want to append $(this).parent() into another div and then remove $this element.
I am able to successfully remove $this element. But .append($(this).parent()) seems a wrong approach and not working. I want to make an exact copy into another div before removal of $this element.
Reproduced the problem statement:
https://jsfiddle.net/rvgo3Luc/
Use clone() to duplicate the element and then append the cloned element.
$("#button").on("click", function(){
console.log($(this).parent());
// I have to copy this element into say a new div and remove this present element.
// How to append $(this).parent()
$("#a").append($(this).parent().clone());
$(this).remove();
})
JSFIDDLE

Changing :before sign when slidedown Bootstrap

I have navbar from bootstrap in sidebar and I want to change :before sign on click on element in my menu. But I have problem... It's looks like:
But I want to change "+" sign to "-" after click. It should looks like it:
This menu have 2depth. U can see it how it works on port.cruzzapps.com
It's my JS, but this code not working propely:
$(document).ready(function(){
$(".collapse li a").click(function(event){
$('.collapse li a').removeClass();
$(this).addClass('minus');
event.preventDefault();
});
});
Let's change your code to this:
$(document).ready(function(){
$("li a").click(function(event){
$(this).toggleClass('collapse');
$(this).toggleClass('minus');
event.preventDefault();
});
});
I'm using toggleClass so that way when you click it again, the original class is added back and the new class is removed. What this code does is when an anchor tag in a list is clicked, it loses it's collapse class and gains a minus class. When it is clicked again, it loses it's minus class and gains the collapse class. If you've set up your CSS properly this will give you the effect you want.
Note I also changed your selector inside the click handler to not select every .collapse li a as that was changing all of the elements rather than just the one you wanted.

jquery - css does not work after .after()

In my html code i change the background color of all elements with the id '#mutable', with a click on button 'blue' or 'red'.
With the third button 'load' i .append() a new HTML with the same id.
But the background color does not change for the new elements?
Whats going wrong?
fiddle
html
<div id="mutable" style="width:50px;height:50px;" class="blue">sjdfhksfh</div>
<div id="newHTML">newHTML</div>
js
$(document).ready(function() {
$('#blue').on('click', function() {
$('#mutable').trigger('blue');
});
$('#red').on('click', function() {
$('#mutable').trigger('red');
});
$('#load').live('click', function(event) {
event.preventDefault();
$('#newHTML').after('<div id=\"mutable\" style=\"width:50px;height:50px;\">...</div>');
event.stopPropagation();
});
$('#mutable').bind('red', function(e) {
$('#mutable').addClass('red').removeClass('blue');
});
$('#mutable').bind('blue', function(e) {
$('#mutable').addClass('blue').removeClass('red');
});
});
You are always creating a new div with the id #mutable. Now jQuery in terms of an ID just runs down the DOM and when it finds the first occurance of your ID, it changes it, but nothing else.
For some solutions, you could use a class .mutable instead of an id - but then every created div would be changed on click.
Or you could enumerate your IDs with a number like #mutable1, #mutable2 and so on and change your menu to select the specific div.
Or, to change just the last occurance of your dynamically created divs, use the :last - CSS- Pseudoclass.
1) id should be unique at page. And selectors like #mutable match only first element with such id -- So after pressing 'load' you create new element with the same id, but $ still match old one
2) try next ( I just change your id-selector into attr-selector which allow find all elements with id ):
$('#mutable').bind('blue', function(e) {
//alert('blue');
$('[id=mutable]:last').addClass('blue').removeClass('red');
});
http://jsfiddle.net/q3wzwr6z/

jQuery adding elements to parent

I'm having some trouble figuring out how to add elements to a parent object on a click event.
The result that i'm hoping to achieve is this:
<ul>
<li><button>B1</button>
<ul class="newul">
<li><button>B1.1</button>
<ul class="newul">
<li><button>1.1.1</button></li>
<li><button>1.1.2</button></li>
</ul>
</li>
<li><button>B1.1</button></li>
</ul>
</li>
<li><button>B2</button></li>
<li><button>B3</button></li>
</ul>
Let's say I click button B2. I want a new UL added to the parent LI of that button and then be able to add new LI elements to the newly created UL. I hope that makes sense!
So basically, click button, add new UL with class "newul" to the LI you're currently in -> add new LI's to that newly created UL.
The jquery I'm currently using is as follows:
$('button').click(function(){
//Get parent..
var parent = $(this).parent();
//Add a new UL to the parent and save it as newul
var newul = parent.add("ul");
//Add the class to the new UL
newul.addClass('newul');
//Add a new li to the new UL
newli = newul.add('li');
//Add a button to the new LI
newli.append('<button></button>');
});
Unfortunately, this is having completely undesired effects and sticks buttons everywhere all over the place. I'd appreciate any help you can offer.
Here's a visible example of what i'm after. The top part is the effect id like to achieve.
Example of desired result
Even though #am not i am has the correct code. There is no explanation of why your code fails, and I think that's the answer you are asking for.
There are several problems in your code:
First
//Add a new UL to the parent and save it as newul
var newul = parent.add("ul");
The 'ul' is a selector and so is going to search the DOM for other <ul> elements, rather than create a new one. Also, parent.add() method is returning the parent object, not the ul's that you selected.
Correct code:
//Add a new UL to the parent and save it as newul
var newul = $("<ul>").appendTo(parent);
Second:
//Add a new li to the new UL
newli = newul.add('li');
Same problem again, and since newul is actually still the parent you're getting all types of craziness. Also, you're missing a var, but maybe I just don't get your closure.
Correct code:
//Add a new li to the new UL
var newli = $("<li>").appendTo(newul);
That's all. If you fix that in your code, it'll work.
However, unless you really need those references to persist, better performance is usually achieved if you pass the whole thing as a string:
$('button').click( function() {
$(this).parent()
.append(
$('<ul class="newul"><li><button></li></ul>')
);
});
Edit
And if you wanted all the new buttons to have the same functionality, use the on() method and a class for your buttons:
$('body').on('click', 'button.ul-appending', function() {
$(this).parent()
.append(
$('<ul class="newul"><li><button class="ul-appending"></li></ul>')
);
});
You could change the 'body' selector to something much more specific so this doesn't get queried on every click on your page. Just make sure to add the class ul-appending to all the existing buttons that aren't generated by this handler.
JSFiddle
One issue I see here is that the new buttons created will not have the click event bound to them. I fix this by using on and setting the event as a delegate. In doing so I give the outer ul an id of container. I also check to make sure you haven't already added a ul element and append one if it isn't inside the li. Here is a working example.
$('#container').on("click", "button.newbtn", function(){
var parent = $(this).closest('li');
var childUl = parent.children('ul');
if(childUl.length === 0) {
parent.append("<ul class='newul'></ul>");
childUl = parent.children('ul');
}
childUl.append($("<li><button class='newbtn'>" + $(this).html() + "." + (childUl.children().length + 1) + "</button></li>"));
});​
$('button').click(function(){
//Get parent..
var parent = $(this).parent();
//Add a new UL to the parent and save it as newul
var newul = $("<ul/>");
//Add the class to the new UL
newul.addClass('newul');
//Add a new li to the new UL
var newli = $('<li/>');
//Add a button to the new LI
newli.append('<button></button>');
// add ul to parent li
parent.append( newul.append( newli ) );
});
The issue here is that you're using .add() instead of .after().
.add() adds the passed element to the current selection. .after() adds the passed elements after the current selection.
Using .after(), we can simplify your script into a nice little one-liner:
$('button').click(function(){
$(this).after('<ul class="newul"><li><button></button></li></ul>');
});​
Since .after() inserts content next to the current element, there's no need to get the .parent(). .after() can take a complete string of HTML, so there's no need to use jQuery to manipulate the class and add the child elements.
Example.
Use .on function for dynamically added elements.
You can use something like this.
$(document).ready(function(){
i = 1;
$('body').on("click","button",function(event){
$(this).after('<ul class="newul"><li><button>TestButton'+i+'</button></li></ul>');
i++;
});
});
Here is the DEMO. Adjust button with your css and button values accordingly.
​

JQuery: Making a tab active

Given this website: link text
How would one find an element and remove any class=selected and add it to the correct link?
That way when history, models, and the like links will look become selected when clicked upon.
The following code should do the trick in your case..
// when clicking a link inside the sub-navigation list
$('#sub-navigation a').click(function(){
// first remove the selected class from the active one
$('#sub-navigation li.selected').removeClass('selected');
// then find the parent li of the clicked element and add the selected class
$(this).parents('li').addClass('selected');
});
(it is tested on your example page and it works as expected..)
$("a").click(function(e) {
$("a.selected").removeClass("selected");
$(this).addClass("selected");
});

Categories

Resources