I want to remove the bootstrap child classes row from the parent element .But not working for me showing the errors.
the code is
if(document.getElementById(v)){
console.log(v)
document.getElementById("mapper").removeChild(document.getElementsByClassName("row"))
//document.getElementById("mapper").classList.remove('row');
}
Considering element with id="mapper" is your parent element and you want to remove children's row class. Try this :
var mapper = document.getElementById("mapper").children;
for(i=0; i<mapper.length;i++) {
mapper[i].classList.remove("row")
}
Related
Depending on how many rows my sql query returns I will create divs to present the data.
Every div needs to have an unique id but I do not know how to do this efficiently.
Right now I have defined a couple of id's but this can't possibly be the right way to do it.
#myid1, #myid2, #myid3, myid4 { }
This will not work if I get more rows.
What is the best/correct way to do this?
You could use this CSS selector to select any div element with an ID that starts with 'myid':
div[id^="myid"] { ... }
If you want to automatically assign unique ID's to your elements, you could use JavaScript (nodeList is an array of your elements)
Ancient JS:
for (var i = 0; i < nodeList.length; i++) { //loop through every element in your array
nodeList[i].id = 'myid' + i; //set element ID to 'myid' + current index
}
ES6:
nodeList.forEach((item, i) => { //loop through every element in your array
item.id = 'myid' + i; //set element ID to 'myid' + current index
});
Your generated ID's will be 'myid0', 'myid1', 'myid2' and so on.
you can use the "class" instead of "ID" beacuse you dont know how much row is there.when you have to apply same css on more than one element than you have to use "class".
you can also use id and class aplly id on parent div and class on sub div.
like
#row_container .row{
}
here #row_container is parent div and .row is child div
if you don't want to apply a css on that row than simply you have to genrate dayanmic id's.
I have a class named X which has multiple <span> inside and I also have a css selector X span.
In JavaScript how can I use X span instead of X in the following case:
document.querySelector('.ABC').classList.add(X)
I tried document.querySelector('.ABC').classList.add(X span) which definitely isn't working.
In Javascript, working with the HTML works like this:
You ask the browser to give you an object or list of objects that correspond to the HTML elements
You use the objects to modify the page
If I understand correctly, what you want to do is:
Find element by className ".ABC"
Find "span"-s inside that element
Give those spans a class
To do those, follow these steps:
// get the first element that matches .ABC
let parent = document.querySelector(".ABC");
// now parent is either an Element, or undefined/null
// if it's not null, we can call querySelectorAll
// get all elements inside the parent that are spans
let spans = parent.querySelectorAll("span");
// spans is now either an array of Elements, or undefined/null
// if it's not null, we can iterate over it
for (let span of spans) {
span.classList.add('X');
}
I clone multiple select elements in the following manner. This work perfectly:
Demo: https://jsfiddle.net/DTcHh/36308/
// get all items of specific class
var $selectedClassDiv = $('.to-clone');
// find select eles and clone into div
$('#cloned-list').html($selectedClassDiv.find('select').clone());
// loop through cloned select eles to set the correct selected option
$selectedClassDiv.find("select").each(function(i) {
var select = this;
$('#cloned-list').find("select").eq(i).val($(select).val());
});
The problem I have is that I would like to wrap these select items in a div that has a custom class. I've tried multiple methods to no avail, my latest attempts below.
Has no effect
$('#cloned-list').html($selectedClassDiv.find('select').clone().wrap('<div class="customClass"></div>'));
Demo: https://jsfiddle.net/DTcHh/36309/
Causes error
$('#cloned-list').html($selectedClassDiv.find('select').clone().parent().wrap('<div class="customClass"></div>'));
Demo: https://jsfiddle.net/DTcHh/36310/
I am interested in a solution that wraps a div around the select items. Cloning the parent div and adding a class isn't an option.
You could add it within your current loop:
https://jsfiddle.net/DTcHh/36311/
$selectedClassDiv.find("select").each(function(i) {
var select = this;
$('#cloned-list').find("select").eq(i).val($(select).val()).wrap('<div class="customClass"></div>');
});
When I add text in my text field before and after the existing paragraphs the remove button functions perfectly. However, if I click the remove button before adding elements you have to click TWICE to remove the paragraphs that were not created by a function.
What could be wrong here? I watch the DOM in Firebug as I'm adding and removing, and before the new elements are added, my remove button does not target "firstDiv" on the first click, but does so on the second click.
Here is the problem function:
function removeIt() {
firstDiv.removeChild(firstDiv.lastChild);
}
Here is the fiddle: http://jsfiddle.net/nxpeD/2/
Thanks for the help!
That's because you have text nodes (spaces) at the end, so the last paragraph isn't the last child (it is the last element child).
Then, use
function removeIt() {
firstDiv.removeChild(firstDiv.lastElementChild);
}
Demo: http://jsfiddle.net/nxpeD/6/
Compatibility: To make it work on old browsers, you could also use
function removeIt() {
if (firstDiv.lastElementChild) {
firstDiv.removeChild(firstDiv.lastElementChild);
} else {
var last;
while((last = firstDiv.lastChild).nodeType !== 1) {
firstDiv.removeChild(last);
}
firstDiv.removeChild(last);
}
}
References
lastChild
lastElementChild
Use:
firstDiv.removeChild(firstDiv.lastElementChild);
Since there are formatting new line chars in your html, that will be considered as a child as well of the div. So you need to use lastElementChild to get the element and ignore the formatting and and other text nodes outside.
Demo
The last_child returned is a node. If its parent is an element, then the child is generally an Element node, a Text node, or a Comment node. Returns null if there are no child elements.
lastElementChild
In my div i have a child div of class "someClass". I want to access that child by classname, not id.
EDIT: Only in this particular div, not all the other divs with same classname
var childOfNamedDiv = $('#namedDiv>.someClass')
var div = $('.someClass');
See jQuery Selectors.
just use the class selector:
$('div>.someClass').toggle()
if you already have a reference to the jquery object that is the parent of the div that you want to find:
var parent = $("#someDiv"); // this is the div that you may alread have found earlier
var child = parent.children(".someClass");