I want to get the specific input element on clicking on the click button. And there might be more input element with this class "quan" in the future. So, I want to get the specific input element with class "quan" on clicking the click button which associate with it. The way I did in the js file only give me the first element of that class name. How do I get the specific element? Thanks for your help.
HTML
<div>
<div>
<button onclick="click(event)>Click<button>
</div>
<div>
<input class="quan" type="number" min="0" value="2"/>
</div>
</div>
Javascript
function click(event){
console.log(document.querySelector(".quan"));
}
Use a selector finding the common ancestor (using closest) of them and find the correct child.
function my_click(elem) {
// ideally elem.closest(".group-name")
// but this will also do
var parent = elem.parentNode.parentNode
var child = parent.querySelector(".quan")
console.log(child.value);
}
<div>
<div>
<button onclick="my_click(this)">Click</button>
</div>
<div>
<input class="quan" type="number" min="0" value="1" />
</div>
</div>
<div>
<div>
<button onclick="my_click(this)">Click</button>
</div>
<div>
<input class="quan" type="number" min="0" value="2" />
</div>
</div>
Related
I have two divs
<div class="maca">
<input type="hidden" value="1">
<div onclick="removeInput(nearest input type hidden)">Remove</div>
</div>
<div class="maca">
<input type="hidden" value="1">
<div onclick="removeInput(nearest input type hidden)">Remove</div>
</div>
I want to send as a parameter the value of nearest input type hidden of that div that we are clicking on
Im not 100% sure what you mean with nearest but with this you get the input hidden inside the div. By the way you could also put the element.parentNode.querySelector into the onclick but personally i like it more to split HTML and JS.
function removeInput(element){
let value = element.parentNode.querySelector("input[type='hidden']").value;
console.log(value);
}
<div class="maca">
<input type="hidden" value="1">
<div onclick="removeInput(this)">Remove</div>
</div>
<div class="maca">
<input type="hidden" value="5">
<div onclick="removeInput(this)">Remove</div>
</div>
You can send the event as a parameter to a javascript function and then find the input via the parentNode. This isn't a literal interpretation of your question since faithfully the "nearest" element is rather complex and probably not what you're looking for.
function removeInput(e) {
const nearestInput = e.target.parentNode.querySelector("input[type='hidden']");
console.log(nearestInput);
}
<div class="maca">
<input type="hidden" value="1" />
<div onclick="javascript:removeInput(event)">Remove</div>
</div>
<div class="maca">
<input type="hidden" value="1" />
<div onclick="javascript:removeInput(event)">Remove</div>
</div>
You should not use inline event listeners, which are widely considered bad practice.
Instead, use addEventListener to add the click listeners, and find the input (given your markup structure is fix like you've shown) using previousElementSibling:
for (const remover of document.querySelectorAll('.remove-input')) {
remover.addEventListener('click', () => remover.previousElementSibling.remove(), { once: true });
}
<div class="maca">
<input type="hidden" value="1" />
<div class="remove-input">Remove</div>
</div>
<div class="maca">
<input type="hidden" value="1" />
<div class="remove-input">Remove</div>
</div>
I have span element selected and I want to traverse to input:checkbox. I have tried using next(),nextAll(),nextElementSibling. But as input element is not sibling of span it is not working. Any other way I can select the input element?
Below is my code:
<span>This element is selected via javascript</span>
<div>
</div>
<div class="mb_content">
5 attachement
<br />
<span class="error_star mr_1"><b>Size:5 MB</b></span>
</div>
<div class="checker f_left">
<label for="rec_787128222"> </label>
<input type="checkbox" class="mb_check" /><!--i want to select this-->
</div>
PS: Actual structure is bit different but I can not paste it over here. This is kind of replica for it.
You can go to the parent element of the selected DOM element and then select the input.
Try it like this:
// <the element> . <the parent> . <select the input element>
element.parentNode.querySelector('.mb_check')
If you really want to use nextSibling()...
var el = document.querySelector("#foo").nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.children[1];
el.style.display = 'none';
<span id="foo">This element is selected via javascript</span>
<div>
</div>
<div class="mb_content">
5 attachement
<br />
<span class="error_star mr_1"><b>Size:5 MB</b></span>
</div>
<div class="checker f_left">
<label for="rec_787128222"> </label>
<input type="checkbox" class="mb_check" />
<!--i want to select this-->
</div>
Without any checks for null, you can try this:
document.querySelectorAll('.error_star.mr_1')[0].parentNode.nextElementSibling.children[1];
I have a DOM structure similar to this:
<div id="ans1">
<input id="in1" />
<input id="in2" />
</div>
<div id="ans2">
<input id="in1" />
<input id="in2" />
</div>
How can I select some of the descendants of an ancestor?
Something like:
$("#ans1 #in1, #ans1 #in2")
If you replace your 'id's with classes (since ids should be unique), then,
<div id="ans1">
<input class="in1" />
<input class="in2" />
</div>
<div id="ans2">
<input class="in1" />
<input class="in2" />
</div>
Then, to select all the descendants of id=ans1 having class="in1", you go like,
$('#ans1 .in1')
This will return an array of all the .in1 class elements inside id=ans1 element
You can use the children function
$("#ans1").children("#in1, #in2")
You should use unique ids thought the DOM, use classes to specify elements that are the same in nature.
change your children to have same class of in1
$("#ans1 > .in1")
Will select all direct descendants of ans1 with class of in1.
http://jsfiddle.net/foaje732/2/
HTML source:
<p id="words">Words
<p>
<label>Q1
<input type="text" id="q1" name="myinput" />
</label>
</p>
</p>
Jscript:
$('#words').append($('<p></p>').html("This is clearly in the wrong place."));
What you actually get:
Words.
This is clearly in the wrong place.
Q1 [input field]
It is because your mark up is wrong, the p element cannot contain another block element, it can contain only inline elements. So the actual html rendered by your markup in the browser will be as below, which makes your output correct.
<p id="words">Words</p>
<p>
<label>Q1
<input type="text" id="q1" name="myinput">
</label>
</p>
<p></p>
So one possible solution you can look for is to use div as the external container like
$('#words').append($('<p></p>').html("This is clearly in the wrong place."));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="words">Words
<div>
<label>Q1
<input type="text" id="q1" name="myinput" />
</label>
</div>
</div>
We cannot get any child <element> inside p element, the $('#words').children() will return 0 so that it append your code at the top of p ( after words -text, not any element).
In this case if you want to fix it, try change p to div:
<div id="words">
<p>Words</p>
<p>
<label>Q1
<input type="text" id="q1" name="myinput" />
</label>
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(document).ready(function(){
$('#words').append($('<p></p>').html("This is clearly in the wrong place."));
})
I made a list of components that user can add/remove rows of input fields at liberty, so user can freely remove/add a row of data dynamically:
----|_||____| -remove button-
----|_||____| -remove button-
----|_||____| -remove button-
----|_||____| -remove button-
----Add button- ---- Save button ----
However, here comes a problem: the data is arranged in html arrays in order to get back to JSP/sevlet model, like thie
<input id="row[0]" .../>
<input id="row[1]" .../>
<input id="row[2]" .../>
......
<input id="row[n]" .../>
So when user remove a row, especially in the middle of the section, then the array sequence is definitely messed up because I just use basic jquery command to do the job:
if (confirm(message_confirm_delete)) {
j(this).parent().remove();
}
so the question is: what is the best way to re-arrange all of the input fields array, when user remove one of the array elements between?
If I'm understanding your question correctly, you're saying the ids on the input fields are inaccurate after removing one from the middle, correct? If that is the case, something like this will update the id attribute after an element is removed.
<div>
<input id="row[0]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
<input id="row[1]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
<input id="row[2]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
<input id="row[3]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
<input id="row[4]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
<input id="row[5]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<script>
$('button.remove').click(function() {
$(this).parent('div').remove();
$('input.removableInput').each(function(index) {
$(this).attr('id', 'row[' + index + ']');
});
});
</script>