I have a page where users can create tags (much like here in stackoverflow), which are then sent(POST) to the back end to be stored in a database. The user can make tags but also remove them before finally hitting Submit.
In the DOM the tags are generated along with an 'x' button. The 'x' button removes the element from the DOM, but the trouble comes when removing from the array. The closest I could get to a solution was this question, however I couldn't get it to quite work for me.
Here's the codepen
Here's the javascript (i'm using JQuery)
window.tag_array = [];
$( "#addtag" ).click(function() {
var tag = $("#input-tag").val();
//if tag is empty
if(!$('#input-tag').val()) {
alert("can't be empty");
} else {
//put tag.val into an array
tag_array.push(tag);
//add to DOM
$( "#tagsbox" )
.append( "<div class='displaytag'><i>"+tag+"</i><input type='hidden' class='tag' value="+tag+"><button onClick='return false;' class='removetag'>x</button></div>" );
//reset value in text area to null
$("#input-tag").val("");
//remove tag onclick
$('.removetag').click(function() {
$(this).parent().remove(); //remove tag from DOM
//splice from array
tag_array.splice( this, 1 ); //<--HERE IS PROBLEM (i think)
});
} //end else
alert(tag_array); //check array
});
The end result is the splice takes out too many array items.
I have also tried
tag_array.splice(tag_array.indexOf(tag),1);
to a similar result.
Please help! Thanks in advance
You should probably use something like .indexOf() to get an index of the element and then splice an array:
tag_array.splice(tag_array.indexOf(elm),1);
Working demo
The splice part is OK. The problem is that you're adding a click callback to .removetag too many times.
Everytime you append a new element, you are adding another click event to every .removetag item that is already on the page.
$('.removetag').click(function()
This way, whenever you click on one element, all the others were assign to fire the click callback too.
Solution
Instead, when creating the tag, set the click event only to the last added .removetag element:
$('.removetag').last().click(function()
Updated CODEPEN
Related
I want to clear all list items in my <body>. So on a button press, the item text from all the lists are removed. No use of IDs or anything, just if there is an <li> tag, it's innerHTML is cleared out.
I have tried a few different methods, but I cannot figure it out.
Any help is appreciated.
Basically what I was trying to do is clearly incorrect as you can see here:
function clearLI() {
document.getElementById("li").innerHTML = ""
};
You can do this quite simply by iterating over every li element and settings its innerHTML to nil.
Here's the code.
Array.from(document.getElementsByTagName('li')).forEach(el => el.innerHTML = '');
You mean
innerHTML.replace(newValue);
?
Or did you forget to hyperlink Li to body?
I am dynamically generating a table and after that I want to append it as a child to a div. The problem is every time i regenerate the table it gets appended in the same div without the old table removed.
if(context.children.length == 0){
context.appendChild(table);
}else{
context.replaceChild(table);
}
I tried with checking if the child already exists and if it does i replace it with the new element.
But I get the error The argument is not optional and I don't know how to do it otherwise. Any ideas?
That's not how replaceChild() works, You should, paremtElement.replaceChild(new element, element to be replaced) https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild
You need to provide the second argument as the child to be replaced in Node#replaceChild method.
if(context.children.length == 0){
context.appendChild(table);
}else{
context.replaceChild(table, context.children[0]);
}
I have an element with an array id id="x[]" that vary depending on the number of elements that I have on a database. It's basically a x button to delete a certain table row in the database.
<div align="center" id="x[]" class="x">
<img src="x 2.png" alt=""></div>
Problem is, I don't know how to pass this id into the jQuery selector. I want to change the form action to delete the row and create an hidden input to get the paramater I need from another field with an array id id="codsinmov[]" with the same index as x[]. What I have so far is:
$(document).ready(function(){
for(var i=0; i<x.length; i++) {
$('#x[i]').click(function(){
var $hiddenInput = $('<input/>',{type:'hidden',id:codsinmovesse, name:codsinmovesse});
$hiddenInput.val($('#codsinmov[i]').val());
$hiddenInput.appendTo('#tabelaeditavel');
$('#form').get(0).setAttribute('action', 'deletemoviment.php');
$('#form').submit();
});
}
});
But it doesn't work.. So, any ideas? Sorry, I'm a beginner at jQuery. Thank you very much!
you can use
$("div[id^='x['").click(function(){
// write code here })
So this will execute on click of those ids of div which start from x.
So as per my understanding You need not to use for loop here rather use 'this' keyword and do what you want.
I hope it will help you.
If you want to add an eventListener to ALL elements you can simply do it like that
var $myButtons = $('.buttons');
That way the whole list of Elements are stored behind the variable $myButtons.
Now you can proceed as following:
$myButtons.on("click", function(event){
console.log(this); // this will print out the clicked element
});
This way every element with the class .buttons is clickable and accessable.
If you want to dynamically select a single element with jquery depending on some value you have to exclude your [i] from the string
for example like that $('element:nth-child('+[i]+')');
I have a html div and I clone it using Jquery. That div contains labels and text fields. ids of all of them generated and assigned dynamically. I have no problem with that.
A java script is assigned to a text field of original div. The cloned text fields does not have the javascript assigned to it.
the script I need to assign:
<script>
$(function() {
$("#datepick_onBooking,#datepick_Pay1,#datepick_Pay2,#datepick_totPay,#datepick_deedFees").datepicker();
});
</script>
the script I use to make clones:
<script>
var i = 3;
//When DOM loaded we attach click event to button
$(document).ready(function() {
$('#addAnotherPayment').click(function() {
var cloned = $('.PayDiv0').first().clone();
var noOfDivs = $('.PayDiv0').length+2;
cloned.insertBefore("#totPayForm");
// append count to the ids
cloned.attr('id', 'PayDiv' + noOfDivs);
cloned.find('label').attr('id', 'PayLbl' + noOfDivs);
cloned.find('input[type="text"]').attr('id', 'datepick_Pay'+ noOfDivs);
cloned.find('input[type="number"]').attr('id', 'amount_Pay'+ noOfDivs);
cloned.find('.PayLbl2').html("Payment No " + i++ + ':');
});
});
</script>
datepick_Pay1, datepick_Pay2, datepick_totPay, datepick_deedFees are static elements and they have been assigned to the script. I create text fields using cloning as datepick_Pay3,datepick_Pay4, and so on.
I cannot figure out how to dynamically assign the script to that newly created elements.How can I do that?
A Boolean indicating whether event handlers and data should be copied along with the elements.
change this line.
var cloned = $('.PayDiv0').first().clone(true);
when you clone something especially elements which having events
use parameter as
clone(true)
But this will be harmfull based on how event is attached on the actual element when copying the events to the cloned element may affect the actual.
You need to clone with events. http://api.jquery.com/clone/
var cloned = $('.PayDiv0').first().clone(true);
Then your script needs to be changed to work for dynamic elements. Here as soon as input elements gets focus, asssign the datepicker based on wild card id selector, if it doesn't already have one.
$(function() {
$('body').on('focus',"input[id^=datepick_]", function(){
if(!$(this).hasClass('.hasdatepicker'))
{
$(this).datepicker();
}
});
});
I'm new to jQuery and am trying to create jQuery UI buttons dynamically and them to a list. I can create one list item but no more are appended after it. What am I doing wrong?
$('#buttonList').append('<li><button>'+ username + '</button>')
.button()
.data('type', userType)
.click(function(e) { alert($(this).data('type')); })
.append('<button>Edit</button></li>');
<div>
<ul id="buttonList">
</ul>
</div>
This only creates one list item with two buttons (although the second button seems to be encased in the first one, but I can probably figure that issue out). How do I get it to create multiple list items with their own unique 'data' values (i.e. I can't do a find() on a particular button class and give it data values as all buttons would then have the same data)?
I suggest to exchange the position of what you are appending and where you are appending to. This way, you retain the appended object, and should be able to work with it as a standard jQuery selector. From your code i commented out the .button() and the .append() lines, because i'm not sure what you want to do with them. Should you need help adding those lines, just drop a comment to my answer ;)
Oh, i almost forgot: i use var i to simulate different contents for username and userType data.
A JSFiddle for you is here: http://jsfiddle.net/cRjh9/1/
Example code (html part):
<div>
<p id="addButton">add button</p>
<ul id="buttonList">
</ul>
</div>
Example code (js part):
var i = 0;
$('#addButton').on('click', function()
{
$('<li><button class="itemButton">'+ 'username' + i + '</button></li>').appendTo('#buttonList')
//.button()
.find('.itemButton')
.data('type', 'userType'+i)
.click(function(e) { alert($(this).data('type'));
})
//.append('<button>Edit</button></li>')
;
i++;
});
You need complete tags when you wrap any html in a method argument. You can't treat the DOM like a text editor and append a start tag, append some more tags and then append the end tag.
Anything insterted into the DOM has to be complete and valid html.
You are also not understanding the context of what is returned from append(). It is not the element(s) within the arguments it is the element collection you are appending to. You are calling button() on the whole <UL>.
I suggest you get a better understanding of jQuery before trying to chain so many methods together
Just a very simplistic approach that you can modify - FIDDLE.
I haven't added the data attributes, nor the click function (I'm not really sure I like the
inline "click" functions - I generally do them in jQuery and try to figure out how to make
the code efficient. Probably not very rational, but I'm often so).
JS
var names = ['Washington', 'Adams', 'Jefferson', 'Lincoln', 'Roosevelt'];
for( r=0; r < names.length; r++ )
{
$('#buttonList').append('<li><button>'+ names[r] + '</button></li>');
}
$('#buttonList').append('<li><button>Edit</button></li>');