having trouble deleting specific html element with javascript - javascript

I'm having trouble deleting the specific element that the delete button is for, instead it deletes the last in the array, or the first with my previous code, any help is greatly appreciated. Vanilla js.
Codepen: https://codepen.io/Adrw4/pen/LzvjLj
idNum--;
console.log(idNum);
console.log(array);
var node = document.getElementById(idNum);
node.parentNode.removeChild(node);

Instead of relying on the ID of the elements, just pass in the event to the deleteTodoItem function on click event. Based on the knowledge of the DOM, you can find out the related li element and delete it.
function deleteTodoItem(event) {
var node = event.target.parentNode;
node.parentNode.removeChild(node);
};
Here's the updated codepen:
https://codepen.io/Nisargshah02/pen/OxGjOr?editors=1010

Related

Get last added element of an element

I have a pivot element and I want that whenever an element is added to this pivot element a javascript function is called on it. The call must happen exact once per element.
DOMNodeInserted is marked as deprecated so I tried to use the workaround found here. The approach is working fine, but in addition to the element to which the addition happended (event.target), I also need to know which element was added.
Do I have to keep record of all elements added to my pivot element and then compare them after the event happened to detect new elements or is there an easier approach?
If your variable references a node, to retrieve the last item added to it you can use the lastChild property.
var node = document.getElementById("something");
var last = node.lastChild;
last.appendChild(document.createTextNode("I'm the last one..."));
An alternative may be childNodes:
var node = document.getElementById("something");
node.childNodes[node.childNodes.length - 1].appendChild(document.createTextNode("I'm the last one..."));
For extra reference: https://developer.mozilla.org/en-US/docs/Web/API/Node/lastChild
and https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

Select cloned element by data attribute using jQuery

So I have cloned an element and added some data to it. Now I need to select that cloned element by its data attribute. The problem is that I can't find, select that cloned element based on data attribute. Any ideas?
Here is the fiddle http://jsfiddle.net/fjckls/hho6k86a/
This doesn't work:
var clone = $(".clone").clone(true);
clone.html("this is clone")
clone.data("info", "this-is-clone");
$(".clone-holder").append(clone);
// nothing is selected
var cloned = clone.find("[data-info='this-is-clone']");
cloned.css("color", "red")
#fjckls it's just a work-around by using attribute instead of data, it
does not explain why your code does not work. This kind of answer of
course won't help community much. – King King
I have accepted #Hendra Lim answer for the moment - and I understand its kind of a workaround - not using data attribute but instead creating new custom attribute. If someone has a "proper" solution of using data in my scenario then I would reconsider the accepted answer. For the time being it works so I'll leave where it is.
try this :
var clone = $(".clone").clone(true);
clone.html("this is clone")
clone.attr("info", "this-is-clone");
$(".clone-holder").append(clone);
var cloned = $(".clone-holder").find("[info='this-is-clone']");
cloned.css("color", "red")
here is the working example here
what u do wrong, is u try to find cloned element inside ".clone" element, instead u have to find cloned element in ".clone-holder" element coz u append ur clone element there. and replace clone.data to clone.attr.

$.each only affects the first element?

Looping through all the elements of the class, I see the code below only affecting the first element in the array yet the console log logs every one of them.
del = $('<img class="ui-hintAdmin-delete" src="/images/close.png"/>')
$('.ui-hint').each(function(){
console.log($(this));
if ($(this + ':has(.ui-hintAdmin-delete)').length == 0) {
$(this).append(del);
}
});
The elements are all very simple divs with only text inside them. They all do not have the element of the class i am looking for in my if statement, double checked that. Tried altering the statement (using has(), using children(), etc). Guess i'm missing something very simple here, haha.
Will apperciate input.
I think what you need is (also if del should be a string, if it is a dom element reference then you need to clone it before appending)
$('.ui-hint').not(':has(.ui-hintAdmin-delete)').append(function(){
//you need to clone del else the same dom reference will be moved around instead of adding new elements to each hint
return del.clone()
});
You can do this:
$('.ui-hint:not(:has(.ui-hintAdmin-delete))').append(del);
without even using the each loop here. As jquery code will internally loop through all the descendant of the ui-hint class element and append the del element only to the descendant not having any .ui-hintAdmin-delete elements.
While it would probably help to see your HTML as well, try changing your conditional to
if (!$(this).hasClass('ui-hintAdmin-delete')) {
$(this).append(del);
}

Deleting <li> issue

I'm building a recipe saving application where I have a form that looks like this http://jsfiddle.net/LHPbh/.
As you can see, I have a set of form elements contained in an <li>. You can click Add Ingredient and have more li's added to the field.
My problem is:
The first li is the only one that deletes. If you click Add Ingredient, and then try and delete that one, nothing works?
Is there a way to not have the first li have a delete by it, but all subsequent li's have a delete link on the side? (Just because there should always be at least one ingredient?)
When you call clone(), it isn't duplicating the events. You need to call clone(true) in order for it to do this, as explained in the documentation.
You did not put an event listener on the cloned elements. Also, you should not give the "delete"-link its own id, as those need to be unique.
To make the first ingredient have no delete button, just don't include one in your markup but only dynamically create and append them to the cloned elements:
var deleteButton = $("<a class='float-left'>Delete</a>").click(deleteThis);
$('ul#listadd > li:first')
.clone()
.attr('name', 'ingredient' + newNum)
.append(deleteButton)
.appendTo('ul#listadd');
function deleteThis() {
var li = $(this).closest('li')
li.fadeOut('slow', function() { li.remove(); });
}
Demo at jsfiddle.net
http://jsfiddle.net/LHPbh/2/
$('.deleteThis').live("click", function () {
var li = $(this).closest('li')
li.fadeOut('slow', function() { li.remove(); });
});
It is answer to the 1. point. The problem was, that the eventhandler binding did not happen in newly created elements, because this code runs only on the load of the page. This can be solved by using .live(). And an other problem was, that id-s must be unique. So instead id, here you can use class .deleteThis.
http://jsfiddle.net/LHPbh/19/
This has added answer to the 2. point:
if ($("#listadd li").length == 1) {
return;
}
If the list only contains 1 li element the rest of the callback will not run.
You are adding items that are added to the DOM dynamically, thus jQuery can't access them :)
In this case you can use the following code:
$(document).on('click', '.selector', function(e) {
//code here
});
Secondly, you were loading a quite old version of jQuery.
Thirdly, you were trying to select an element with an ID that already existed, and ID's can only exist one time. I've changed it to a class in the updated example.
Lastly, you were defining the class of the link twice like this:
<a class='float-left' id="deletethis" href='#' class="deletethis">Delete</a>
That also gave a problem, so I changed it to correct markup like this:
<a class='float-left deletethis' href='#'>Delete</a>
Good luck :) I've updated your jsFiddle here:
http://jsfiddle.net/q4pf6/

jQuery appending li to ul unclickable

i have the following code that adds data to unordered lists. The troublesome code is as follows:
$('li:not(:first-child)').click(function() {
var clickedLi = this;
$(this).parent().prepend(clickedLi);
var selectedLi = $(this).text();
alert(selectedLi);
$(this).parent().parent().nextAll().children('ul').children().replaceWith('<li>Please select</li>');
//ajax call
var returnedData = "<li>Dataset1</li><li>Dataset2</li><li>Dataset3</li>";
//populate next with returned data
$(this).parent().parent().next().children('ul').append(returnedData);
});​
If you click on one of the options in the first ul, data gets added to the second ul. However, the list items under this ul are not clickable, and I need them to be so, so that 'chain' can be continued.
Where is the bug? Any help would be much appreciated. Thanks in advance.
Try with: (if you use jQuery greater than 1.6.8. )
$(document).on('click','li:not(:first-child)',function() {
http://api.jquery.com/on/
I can suppose, judging by your code, that you expect the freshly added li to inherit the behaviour you append to the existing ones. Unfortunately it cannot work with the code written that way.
You need to attach the click event in an "observable" way so newly added elements to the dom will get the event handler attached.
To do this, you must use the .on method. You can check its reference here

Categories

Resources