Develop Reference

Find all div's beginning with id="string", iterate through result and change their id's

I have a button which creates div's with numbered id's (div0, div1, div2). Each div contains a button to delete the div. The buttons are also numberes (delete_div0, delete_div1, delete_div2).
After delete e.g. div0, I want to reorganize everything so it starts from 0 again (in this case div1 -> div0 and div2 -> div1.
Another example: Delete div1, div0 -> div0, div2 -> div1.
Any help?
var counter_div = 0;
$("#add_div").click(() => {
$("#divs").append("<div id='div" + counter_div + "'>Div " + counter_div + " <button id='delete_div" + counter_div + "' type='button'>X</button></div>");
//add listener
$("#delete_div" + counter_div).click((event) => {
nr = event.target.id.substring(
event.target.id.length - 1,
event.target.id.length
);
$("#div" + nr).remove();
})
// this is where I am struggling reorganizing divs
function reorganize() {
$("div[id^=div]").each((element) => {
$(this).prop("id", "div" + element);
});
}
reorganize();
counter_div++;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='add_div' type='button'>Add div</button></div>
<div id='divs'></div>
EDIT:
Thanks to everbody, I found a mix out of every solution.
$("#delete_div" + counter_div).click((event) => {
//remove div
$(event.currentTarget).parent().remove();
//reorder all ingredients
$("div[id^=div]").each((element) => {
$(this)
.find("div[id^='div']")
.eq(element)
.prop("id", "div" + element);
};
});
Probalby not the most beautiful solution, but it works. What I did not understand yet is why $(this) in the each-function gives different results depending on which syntax I use.
$("div[id^=div]").each(function(element) {console.log($(this))};
is different to
$("div[id^=div]").each((element) => {console.log($(this))};

You can perform delete with $(event.currentTarget).parent().remove();.
Similarly if you want to select any input from on such button click you can use $(event.currentTarget).parent().find("input").
Or you want to loop over divs and find all inputs then you can use :
$('#divs > div[id^=div]').each(function(k) {
var allInputs = $(this).find('input');
});
var counter_div = 0;
$("#add_div").click(() => {
$("#divs").append("<div id='div" + counter_div + "'>Div " + counter_div + " <button id='delete_div" + counter_div + "' type='button'>X</button></div>");
//add listener
$("#delete_div" + counter_div).click((event) => {
$(event.currentTarget).parent().remove();
})
counter_div++;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='add_div' type='button'>Add div</button></div>
<div id='divs'></div>

First call your reorganize on remove
$("#div" + nr).remove();
reorganize();
})
then:
var numDivsNum=-1;
//set first id -1
function reorganize() {
[...document.querySelectorAll("#divs > div[id^='div']")].forEach(el => {
el.id="div"+(++numDivsNum);
// for each element add new id +1
el.innerHTML=el.innerHTML + "New id= " +numDivsNum;
});
}
And your selector was wrong, it should be:
div[id^='div']
not
div[id^=div]
var counter_div = 0;
$("#add_div").click(() => {
$("#divs").append("<div id='div" + counter_div + "'>Div " + counter_div + " <button id='delete_div" + counter_div + "' type='button'>X</button></div>");
//add listener
$("#delete_div" + counter_div).click((event) => {
nr = event.target.id.substring(
event.target.id.length - 1,
event.target.id.length
);
$("#div" + nr).remove();
reorganize();
})
// this is where I am struggling reorganizing divs
var numDivsNum=-1;
function reorganize() {
[...document.querySelectorAll("#divs > div[id^='div']")].forEach(el => {
el.id="div"+(++numDivsNum);
el.innerHTML=el.innerHTML + "New id is id='div" +numDivsNum+"'";
});
}
counter_div++;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='add_div' type='button'>Add div</button></div>
<div id='divs'></div>

You can re-index them like this:
$('div[id^="div"]').each(function(k) {
$(this).prop('id', 'div' + k);
});
But personally I'd give them all a class so you don't have to rely on the begins with div selector, and then consider using data-id instead of id. data-id will be easier to extract as an integer later and that appears to be your goal. Maybe something like this?
$('div.my_class').each(function(k) {
$(this).data('id', k);
});

$("#delete_div" + counter_div).click((event) => {
//remove div
$(event.currentTarget).parent().remove();
//reorder all ingredients
$("div[id^=div]").each((element) => {
$(this)
.find("div[id^='div']")
.eq(element)
.prop("id", "div" + element);
};
});

You have almost done
But there are some stuff that needs to be fixed
$(this).parent('div').eq(0).remove();

Want to add delete functions for a list of date displayed

to summarize my problem ... I have made a calendar with contains the from - to date range. Now the selected dates are displayed in a div with a delete button for each. But as the id of the button is the same for all the dates ....it deletes the entire date range. I have attached the screenshot as well.
I also tried taking a loop and giving each date a div so that the Del function will work properly. but I wasn't successful. I will mention code for the same
$(document).ready(function () {
var i = 0;
$.each(between, function (key, value) {
var rest = $('#target').append($('<div id="r' + i +value+ '" class="ansbox">
</div>'));
console.log(between);
var template = '<div id="ChildTarget_' + i + '"><span>key + ":" + "' + value + '"
</span><button id="tr' + i + '" class="target">X</button></div><br></div>';
i++;
$('#target').on('click', function () {
console.log("hola");
$('#target').remove();

You should add click event for the button itself.
var template = `
<div id="ChildTarget_' + i + '">
<span>key + ":" + "' + value + '"</span>
<button id="tr' + i + '" class="deleteButton">X</button>
</div>`;
$(".deleteButton').on('click', function() {
// do deletion here
});

First of all ,
The 'X' button should have different id
$.each(between, function (key, value){
$('#results').append(key+":"+value+'<br>');
$('#results').html(between.join('<button id="result"+key+"" > X </button><br>')
here you can see i am adding key to the Button Id making it unique. Use that id to remove the value, that you dont want. Hope this helps

how to refresh the list in jquery javascript

Hi i m having one page with one textbox named search and one search button. When i'm searching anything for the first time it's showing me the right data but when i'm searching some other things for the next time then the elements which was listed before are also appended below of that new list. Suppose i'm searching state name by k it will give me right list of karnataka, kerala. But if i start to search again by g, it will show me in output as goa,gujrat,karnataka kerala. i tried using refresh option but it still not working. This is my js code
$.each(response.state, function (i, state) {
$('#statelist').append(
'<li>' +
'<a href="#">'
+
+'<b>'+ '<font color="green">'+'<h3>'+ state.Name +'</h3>'+'</font>' +'</b>'+
'</a>' +
'</li>'
);
});
$('li img').width(100);
$('.ui-li-icon li').click(function() {
var index = $(this).index();
text = $(this).text();
// alert('Index is: ' + index + ' and text is ' + text);
});
$("#statelist").listview("refresh");
and this is html

You are using .append() function. It appends whatever you append to the end of the list.
Check this link:
http://api.jquery.com/append/
Try using innerHTML property of the DOM model.

You could add
If(!('#statelist').html() == ""){
$(this).remove();
//execute rest of code that appends state list
}
Then do an else statement and execute your append code without removing()
UPDATE: a better option is to do this-
$.each(response.state, function (i, state) {
$('#statelist').html(
'<li>' +
'<a href="#">'
+
+'<b>'+ '<font color="green">'+'<h3>'+ state.Name +'</h3>'+'</font>' +'</b>'+
'</a>' +
'</li>'
);
});
$('li img').width(100);
$('.ui-li-icon li').click(function() {
var index = $(this).index();
text = $(this).text();
// alert('Index is: ' + index + ' and text is ' + text);
});

how to show list items separately in output using javascript

I have created one html which contains search box. After searching, I'm getting the data in list. But when I click on that I'm getting the value of all list item by using this
var text = $(this).text(); method
In my app, if I click on one item only it should give me only that value of list item not other. I'm making a mistake somewhere, but I don't know where.
Here is my code:
HTML
<ul data-role="listview" class="ui-li-icon">
<li id="list"></li>
</ul>
And here is my JavaScript code:
function successCallback(responseObj)
{
// alert(JSON.stringify(responseObj));
form.reset();
dataj=JSON.stringify(responseObj);
len=dataj.length;
for(i=0;i<len;i++)
{
var output = "<ul>" + responseObj.merchants[i].imageFileName+ " " + "<font size=3 color=green>" + responseObj.merchants[i].merchantName + "</font>" +"</ul>";
$('#list').append(output);
}
$('#list').click(function() {
var index = $(this).index();
var text = $(this).text();
alert('Index is: ' + index + ' and text is ' + text);
});
}
So when I'm searching for some a item. I'm getting list of:
ab
abc
But when I clicked on it. I get value of both ab and abc. I just want only one value where I have clicked.

//replace your click event by below code
$('.ui-li-icon li').click(function() {
var index = $(this).index();
var text = $(this).text();
alert('Index is: ' + index + ' and text is ' + text);
});

$('#list').append(output);
I believer list is the id you are giving to list items i.e.
Now, this will confuse the browser because id should be UNIQUE and here you are giving this id to all the list items.
If you fix this, your problem should be resolved!
Or you could simply attach click event using this
$('.ui-li-icon li').click //Your click event handler

It's very difficult to understand what you are asking. From what I can tell you're looking for something like this:
$('#list li').on('click', function(){
alert("index: "+$(this).index() + " value: "+ $(this).text());
});
Here's a fiddle http://jsfiddle.net/Jw8qz/

javascript/jquery- how to obtain all possible values in a drop down box or list box

I am trying to obtain all the values stored in a list box/drop down box.
I am currently using following code to obtain name, type, multiple attribute and values--
$(jQuery('input, select, textarea', $(this).parent('form'))).each(function() {
var textmsg=" Element # " + (count+1) + "...Name of this input element = " + $(this).attr('name') + " multiplechoice-" + $(this).attr('multiple');
textmsg= textmsg + "...Also, for this element, the value is " + $(this).val() + " and type =" + $(this).attr('type');
alert (textmsg);
});
But the jquery call $(this).val() retrieves only the currently selected value in a list box (and not all values). The same thing happens when I use the above code in a drop down box. How do I obtain all the values stored in a list/drop down box? If it is not possible to do this using jquery, then can this be done using pure javascript? (I have a reference to that form element which can be used in pure javascript...)

To create a list of your options you need to declare a variable outside of the loop
var listofoptions = new Array();
$("#id option").each(function()
{
// add $(this).val() to your list
listofoptions.push($(this).val());
});
// do what you want with listofoptions

You can get all fields inside form using following code
var formFields = $("form")[0];
var textmsg = "";
for ( var i = 0, len = formFields.length; i < len; i++ ) {
textmsg +=" Element # " + (i+1) + "...Name of this input element = " + $(formFields[i]).attr('name') + " multiplechoice-" + $(formFields[i]).attr('multiple');
textmsg= textmsg + "...Also, for this element, the value is " + $(formFields[i]).val() + " and type =" + $(formFields[i]).attr('type');
}
document.write( textmsg );
jsFiddler