This question already has answers here:
How to remove an HTML element using Javascript?
(11 answers)
Closed 2 years ago.
Hi I am trying to get a few buttons to work but all the other things I found didnt work here it is
document.getElementById("Element").remove();
isnt working
<button class="btn btn-danger" onclick="reset()">Reset</button>
Error:
script.js:30 Uncaught TypeError: Cannot read property 'remove' of null
at reset (script.js:30)
at HTMLButtonElement.onclick (index.html:14)
Im sorry if this is formatted weird but I am new to this.
Try this
<button id="reset-button" class="btn btn-danger" onclick="reset()">Reset</button>
And you can remove the button via
document.getElementById("reset-button").remove();
The element you want to remove needs to have id="Element".
For example if you want to remove a div it would look like:
<div id="Element"> Div to remove </div>
then your script:
function reset() {
document.getElementById("Element").remove();
}
will work for the button:
<button class="btn btn-danger" onclick="reset()">Reset</button>
I didn't get what you are trying to do, I am assuming you are trying to remove the button.
you are trying to get button by element id but there is no id attribute in the button tag,
it should look like something like below
document.getElementById("id_name").remove();
<button id="id_name" class="btn btn-danger" onclick="reset()">Reset</button>
Just give the id name to your button with the same name you're giving in remove.
document.getElementById("Element").remove();
<button id="Element" class="btn btn-danger" onclick="reset()">Reset</button>
Related
This question already has answers here:
Django Template Variables and Javascript
(18 answers)
Closed last month.
I'm trying to generate a code for editing posts using modal that are made before
but it shows "Identifier or string literal or numeric literal expected" and "Statement expected" ERROR
here is my code:
`
function submitHandler(){
const textareaValue = document.getElementById("textarea_"${post.id}).value
</script>
<button type="button" class="btn btn-secondary"onclick=submitHandler({{post.id}}) > Save Changes</button>
`
want to submit change to editing posts.
if your are sending the textarea id via onclick, so didn't need to get it again via jinja or django template.
<script>
function submitHandler(post_id){
my_textarea = 'textarea_'.concat(post_id);
const textareaValue = document.getElementById(my_textarea).value
</script>
<button type="button" class="btn" onclick=submitHandler({{post.id}})> Save Changes</button>
I have 3 buttons with same ID. I need to get each button's value when it's being clicked.
<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>
Here is my current jQuery script:
$("#xyz").click(function(){
var xyz = $(this).val();
alert(xyz);
});
But it works only for the first button, clicking on the other buttons are being ignored.
I have 3 buttons with same id ...
You have invalid HTML. You can't have more than one element in a page with the same id attribute value.
Quoting the spec:
7.5.2 Element identifiers: the id and class attributes
id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
Solution: change from id to class:
<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>
And the jQuery code:
$(".xyz").click(function(){
alert(this.value);
// No need for jQuery :$(this).val() to get the value of the input.
});
But it works only for the first button
jQuery #id selector docs:
Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.
If you look at the jQuery source you can see when you call $ with an id selecor-($("#id")), jQuery calls the native javascript document.getElementById function:
// HANDLE: $("#id")
} else {
elem = document.getElementById( match[2] );
}
Though, in the spec of document.getElementById they didn't mention it must return the first value, this is how most of (maybe all?) the browsers implemented it.
DEMO
ID means "Identifier" and is valid only once per document. Since your HTML is wrong at this point, some browsers pick the first, some the last occuring element with that ID.
Change ids for names would be a good step.
Then use $('button[name="xyz"]').click(function(){
From my experience, if you use $('button#xyz') selector instead it will work. That's a hack, but it's still invalid HTML.
Although changing the id's to a class is better, you can get all the elements with the same id using the attribute equals selector:
$('[id="xyz"]')
Or this to get only buttons with id xyz:
$('button[id="xyz"]')
Or divs with id xyz:
$('div[id="xyz"]')
etc.
Alternatively you could use the "Attribute Contains Selector" to get all elements with ids that contain "xyz":
$('[id*="xyz"]')
Of course, this means all elements with id that partially contain "xyz" will get selected by this.
this also worked if you have multiple element with same id.
$("button#xyz").click(function(){
var xyz = $(this).val();
alert(xyz);
});
you can check HERE
If you have same id in a container you can use on() to access each element for every event
$("#containers").on("click","#xyz",function(){
alert($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containers">
<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>
</div>
and info about on() is here
You can't have the same id because id is unique in page HTML. Change it to class or other attribute name.
$('attributename').click(function(){ alert($(this).attr(attributename))});
This question already has answers here:
Selecting element by data attribute with jQuery
(12 answers)
Closed 8 years ago.
I want to set a listener to handle button clicks which I know could be done with:
$("#id").click(function() {...});
but i was wondering if there is a way to make it listen to an attribute rather than an ID. because i would like to add custom attributes for example
<span class="btn btn-primary" button-type="css-change"></span>
and i would like to do something like
$(document).attr("button-type").equals("css-change").click(function () { ... } );
is this at all possible?
Use attribute-equals selector [attribute='value']
$("[button-type='css-change']").click(function() {
alert("clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<span class="btn btn-primary" button-type="css-change">hi</span>
You can do this with a attribute selector.
http://api.jquery.com/category/selectors/
In your case the:
http://api.jquery.com/attribute-equals-selector/
You can use the attribute-equals selector:
$("[button-type='css-change']")
Altho you should stick with data-* for custom attributes to pass validation.
$("[data-type='css-change']")
yes you can loop though all the elemnts in the .btn class ..
<span id="1" class="btn btn-primary" button-type="css-change"></span>
<span id="2" class="btn btn-primary" button-type="test"></span>
<script>
$(".btn").each(function()
{
if($(this).attr("button-type") == "css-change")
{
console.log("The winner is "+$(this).attr("id"));
}
});
</script>
or there is also an easier way ..
$("[button-type='css-change']").each(function(index)
{
$(this).html("hi");
}
I'm trying to push number attribute of the element to the array onclick with a simple function, but array contains only empty values separated with commas.
Here's html code.
<button type="button" class="btn btn-success btn-lg" number="12" onclick="basket.push(this.number)">toBakset</button>
<button type="button" class="btn btn-success btn-lg" number="15" onclick="basket.push(this.number)">toBakset</button>
<button type="button" class="btn btn-success btn-lg" number="18" onclick="basket.push(this.number)">toBakset</button>
from the start "basket" array is empty.
Seems this question is so dumb but I can't find a solution :(
number isn't a valid attribute for the button element. In order to retrieve it you would have to use a different function from the API
onclick="basket.push(this.getAttribute('number'))"
Better yet, store your number attribute inside of the data- markup like this:
<button data-number="5" ...
So that it conforms to standards. Then you would use
onclick="basket.push(this.getAttribute('data-number'))"
to retrieve it.
it's because number isn't a standard attribute, so this.number isn't anything. you have to do it another way, such as give an id to each button and keep an array containing which ids have which numbers
button type="button" ?
number attribute ?
Use data-* attributes!
LIVE DEMO
<button onclick="basketPush(this)" data-number="12" class="btn btn-success btn-lg">toBakset</button>
var basket = [];
function basketPush( that ){
basket.push( that.dataset.number );
}
DOCS: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*
i am trying to select value for the selected button like the following :
html code :
<div class="span3">
<div>DEBIT/CREDIT</div>
<div class="btn-group" data-toggle="buttons-radio" id="investadjust-debitcredit-button">
<button name="debitCredit" type="button" id="credit-button" class="btn active" value="CREDIT" >CREDIT</button>
<button name="debitCredit" type="button" id="debi-button" class="btn" value="DEBIT" >DEBIT</button>
</div>
</div>
javascript code :
$("#investadjust-debitcredit-button>.active").val()
but i get only empty when i printed the above line after selecting one button.
what could be the reason.
you need to place your code in
$(document).ready(function(){
// your jquery code
});
As neo said you need to place your code in document ready function and use the class name of the button without spaces or you can add underscore between the words as well like this:
<button name="debitCredit" type="button" id="credit-button" class="btn_active" value="CREDIT" >CREDIT</button>
So, the code goes like:
$(document).ready(function(){
alert("value "+$("#investadjust-debitcredit-button>.btn_active").val());
});
Good Luck!