Remove item from array and html list using jquery - javascript

I have a javascript array called names[] which stores names. (ofcourse)
The names are also stored in list items in my html document, I have this code that removes a name when you click on it;
$(document).ready(function(){
$(document).on('click', 'li', function(){
$(this).remove();
});
});
Can anyone tell me how I remove the same item from the array names[]?
UPDATE: names[] is defined as follows:
function submit() {
var theName = document.getElementById("enter").value;
if (theName == "" || theName.length == 0) {
return false;
}
names.push(theName);
document.getElementById("name").children[0].innerHTML += "<li>" + names[names.length - 1] + "</li>";
document.getElementById("enter").value = "";
}
This is done with an <input>.

Array.prototype.remove = function(item) {
var index = this.indexOf(item);
if (index > -1) {
this.splice(index, 1);
return true;
}
return false;
};
$(document).ready(function(){
$(document).on('click', 'li', function(){
var text = $(this).text();
names.remove(text);
$(this).remove();
});
});

Related

jQuery filter select options by text input

I have a select list where I want to filter the options from a text input.
I wrote this jQuery code:
$('#NotPublishedSelectFilter').keyup(function () {
console.log("NotPublishedSelectFilter keyup");
var filterText = $(this).val();
console.log("filterText: " + filterText);
var allOptions = $('#NotPublishedSelect').find('option');
allOptions.each(function (i, e) {
console.log(i);
if (e.text().indexOf(filterText) != -1) {
e.show();
console.log("show");
} else {
e.hide();
console.log("hide");
}
});
});
However I get the error Uncaught TypeError: e.text is not a function. I get into the each loop so there should be some option for e.
What am I doing wrong?
You must use the current value in a jQuery object to have access to the .text() method. Try:
$('#NotPublishedSelectFilter').keyup(function () {
console.log("NotPublishedSelectFilter keyup");
var filterText = $(this).val();
console.log("filterText: " + filterText);
var allOptions = $('#NotPublishedSelect').find('option');
allOptions.each(function (i, e) {
console.log(i);
if ($(this).text().indexOf(filterText) != -1) {
$(this).show();
console.log("show");
} else {
$(this).hide();
console.log("hide");
}
});
});
Try to change your selector within loop :-
$('#NotPublishedSelectFilter').keyup(function () {
console.log("NotPublishedSelectFilter keyup");
var filterText = $(this).val();
console.log("filterText: " + filterText);
var allOptions = $('#NotPublishedSelect').find('option');
allOptions.each(function (i, e) {
console.log(i);
if ($(e).text().indexOf(filterText) != -1) {
$(e).show();
console.log("show");
} else {
$(e).hide();
console.log("hide");
}
});
});
It may help you.
You need object variable, but accessing event variable. So please use this one
$('#NotPublishedSelectFilter').keyup(function () {
console.log("NotPublishedSelectFilter keyup");
var filterText = $(this).val();
console.log("filterText: " + filterText);
var allOptions = $('#NotPublishedSelect').find('option');
allOptions.each(function (i, e) {
console.log(i);
$(this).text()
if ($(this).text().indexOf(filterText) != -1) {
$(this).show();
console.log("show");
} else {
$(this).hide();
console.log("hide");
}
});
});

How can I get an element with a string regardless if it corresponds to its class or its ID?

Let us consider this function:
function validateField(selector) {
$(selector).on("change, blur", function() {
// do stuff
});
}
That element could have an id=selector or a class=selector. How can I proceed with such abstraction?
You could simply refer to both by doing something like this:
function validateField(selector) {
var $selector = $('#'+selector+', .'+selector); // This will reference every class and id with the selector's name
$selector.on("change, blur", function() {
// do stuff
});
}
You might wanna try something like this, try to see if it's ID first, if it returns 0 as length, try class. But this isn't an good way to do it, maybe you can also try with a flag
function validateField(selector) {
var $selector = $('#' + selector);
if ($selector.length === 0) {
$selector = $('.' + selector)
}
$selector.on("change, blur", function() {
// do stuff
});
}
With an flag
function validateField(selector, classSelect) {
var $selector;
if (classSelect === true) {
$selector = $('.' + selector)
} else {
$selector = $('#' + selector)
}
$selector.on("change, blur", function() {
// do stuff
});
}
This function will accommodate both ID and class selectors:
function validateField(selector, Type) {
var SelectorString = "";
if (Type == "ID")
SelectorString = "#" + selector;
else if (Type == "Class")
SelectorString = "." + selector;
else
return; // invalid so don't create event handler.
$(SelectorString).on("change, blur", function() {
// do stuff
});
}

working with array(s) in JQuery

I am inputting values into an array in jQuery like 1,4,7,3. But when I am displaying the array values, it displays like 1,3,4,7.
i need like 1,4,7,3 as it is when they were inserted. This is my code.
var selectedValues = [];
var $ctrls = $("[id*=chkProcessRoutes] input:checkbox");
$("[id*=chkProcessRoutes] input:checked").each(function () {
var l = parseFloat(($ctrls.index($(this))));
var ll = parseFloat(l) + 1;
selectedValues.push(parseFloat(ll));
});
if (selectedValues.length > 0) {
alert("Selected Value(s): " + selectedValues.toString());
} else {
alert("No item has been selected.");
}
Try this:
var selectedValues = $("[id*=chkProcessRoutes] input:checked").map(function () {
return $(this).val();
});
if (selectedValues.length > 0) {
alert("Selected Value(s): " + selectedValues.toString());
} else {
alert("No item has been selected.");
}

Nothing happend on click - jQuery

I have this code:
jQuery.fn.extend({
SelectBox: function(options) {
return this.each(function() {
new jQuery.SelectBox(this, options);
});
}
});
jQuery.SelectBox = function(selectobj, options) {
var opt = options || {};
opt.inputClass = opt.inputClass || "inputClass";
opt.containerClass = opt.containerClass || "containerClass";
var inFocus = false;
var $select = $(selectobj);
var $container = setupContainer(opt);
var $input = setupInput(opt);
$select.hide();
hideMe();
$input
.click(function(){
if (!inFocus) {
showMe();
} else {
hideMe();
}
})
.keydown(function(event) {
switch(event.keyCode) {
case 27:
hideMe();
break;
}
})
.blur(function() {
if ($container.not(':visible')) {
hideMe();
}
});
function showMe() {
$container.show();
inFocus = true;
}
function hideMe() {
$container.hide();
inFocus = false;
}
function setupContainer(options){
$container = $("." + options.containerClass);
$input = $("." + options.inputClass);
var first = false;
var li = "";
$select.find('option').each(function(){
if($(this).is(':selected')){
$input.find('span').text($(this).text());
first = true;
}
//var $li = $container.find('ul').append('<li>' + $(this).text() + '</li>');
var li = document.createElement('li');
li.innerHTML = $(this).text();
$container.find('ul').append(li);
$(li).click(function(event){
$(li).remove();
});
});
return $container;
}
function setupInput(options){
$input = $("." + options.inputClass);
$input.attr('tabindex', '0');
return $input;
}
};
In this code, the "select" i choose hidden, and replaced by a list.
Now, i want click on some "li", and "li" removed.
But, i click on the "li" i have created, and nothing happened.
Why? how can i remove or do anything else when i click on the "li"?
There is no need to add event to each individual element. Use event delegation.
$(document).ready(function() {
$(commonParentSelector).on('click', 'li', function() {
// ^^^^^^^^^^^^^^^^^^^^
$(this).remove();
});
});
Update commonParentSelector according to your needs and it should work.
Docs: https://api.jquery.com/on
use var $li = $("<li>").text($(this).text()).appendTo($container.find('ul'));

iterate and replace span at the same time

Say I have the following code that iterates over the <span> inside the <div>:
$('#recommendTextArea').children('span').each(function () {
//mentionedFriends.push($(this).html());
var mentionedFriendName = $(this).html();
jQuery.each(friendsList, function () {
if (this.name == mentionedFriendName) {
var facebookId = '#[' + this.id + ']';
}
});
});
I essentially wanted to replace this <span> with the string of facebookId. Is such thing possible? If yes how?
Use replaceWith.
$('#recommendTextArea').children('span').each(function () {
var $span = $(this);
//mentionedFriends.push($(this).html());
var mentionedFriendName = $(this).html();
jQuery.each(friendsList, function () {
if (this.name == mentionedFriendName) {
var facebookId = '#[' + this.id + ']';
$span.replaceWith(facebookId);
}
});
});
EDIT: If you need to deal with special characters, etc. You can do this instead:
$span.replaceWith($("<div>").text(facebookId).contents());

Categories