<div id="mainDiv">
<div class="col-md-3">
<div style="padding-top: 25px">
<button class="btn btn-default" onclick="removeFunction()" >Delete</button>
</div>
</div>
</div>
function removeFunction(){
var parent_id = $(this).parent().parent().parent().attr('id');
console.log(parent_id);
alert(parent_id);
$('#'+parent_id).remove();
}
by the upper code i want to get id of div in which button is present and delete it but in console log and in debugger the value i get is 'undefined'
You need to pass this (it was missing in your code) and you need to use that in your removeFunction function instead of this:
function removeFunction(elem) {
var parent_id = $(elem).parent().parent().parent().attr('id');
console.log(parent_id);
alert(parent_id);
$('#' + parent_id).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<div class="col-md-3">
<div style="padding-top: 25px">
<button class="btn btn-default" onclick="removeFunction(this)">Delete</button>
</div>
</div>
</div>
Related
I have 4 boxes labeled a1, a2, a3, a4 as an example. And when someone clicks on 2 boxes, I want the label (a1, a2 as an example) to print on html output. I just spent over an hour and the best I can come up was printing undefined and null.
Sorry, here is my code
HTML
<div class="container">
<div class="row">
<div class="col-md-3" label="a1">
<a class="btn btn-primary" href="#" role="button">Button 01</a>
<div class="output"></div>
</div>
<div class="col-md-3" label="a2">
<a class="btn btn-primary" href="#" role="button">Button 02</a>
<div class="output"></div>
</div>
<div class="col-md-3" label="a3">
<a class="btn btn-primary" href="#" role="button">Button 03</a>
<div class="output"></div>
</div>
<div class="col-md-3" label="a4">
<a class="btn btn-primary" href="#" role="button">Button 04</a>
<div class="output"></div>
</div>
</div>
</div>
const button = document.querySelector('.btn');
button.addEventListener('click', printLabel);
function printLabel(){
const name = document.querySelector('label');
const print = document.querySelector('.output');
print.innerText = name;
}
label isn't really a standard attribute of the <div> tag. You could try id if you're just looking for a quick solution. Also, you're accessing everything in a pretty strange way.
You should change label to id. The id attribute is pretty much universal to all HTML elements (that I know of) and will allow you to uniquely identify that element.
<div class="container">
<div class="row">
<div class="col-md-3" id="a1">
<a class="btn btn-primary" href="#" role="button">Button 01</a>
<div class="output"></div>
</div>
<div class="col-md-3" id="a2">
<a class="btn btn-primary" href="#" role="button">Button 02</a>
<div class="output"></div>
</div>
<div class="col-md-3" id="a3">
<a class="btn btn-primary" href="#" role="button">Button 03</a>
<div class="output"></div>
</div>
<div class="col-md-3" id="a4">
<a class="btn btn-primary" href="#" role="button">Button 04</a>
<div class="output"></div>
</div>
</div>
</div>
Add a unique id to all of the div elements that are meant to be your "output". This will allow your code to direct the "output" to the right element.
<div class="container">
<div class="row">
<div class="col-md-3" id="a1">
<a class="btn btn-primary" href="#" role="button">Button 01</a>
<div class="output" id="a1-output"></div>
</div>
<div class="col-md-3" id="a2">
<a class="btn btn-primary" href="#" role="button">Button 02</a>
<div class="output" id="a2-output"></div>
</div>
<div class="col-md-3" id="a3">
<a class="btn btn-primary" href="#" role="button">Button 03</a>
<div class="output" id="a3-output"></div>
</div>
<div class="col-md-3" id="a4">
<a class="btn btn-primary" href="#" role="button">Button 04</a>
<div class="output" id="a4-output"></div>
</div>
</div>
</div>
Finally, a couple of changes to your JavaScript. The first change you'll see is that I changed document.querySelector('.btn') to document.querySelectorAll('.btn'). The difference between these methods is that the first one selects ONLY the first element it finds that matches the selector, but the second one selects all elements that match the selector and creates an array.
Next, we loop through that array to add an event listener for each element.
After that, we add a parameter e (for event) to the printLabel() function because addEventListener() passes an event object in the callback function (printLabel). This object gives information about the target element related to the event.
Next, we get the target element of the event and that's your button. Then we get the parentElement of your button because your id or "label" is on the parent element. Then, you can get the name from the id of the parent element.
As a note, remember that id attributes CANNOT have spaces or . or # or really most special characters besides _.
Finally, we need to select your "output" element, and we'll use the id to do that.
document.querySelector('#' + name + '-output'); will get the element that has an id with the given name + -output. For example, if you click button a1 this will get the element with the id of a1-output. The # signifies that you're searching for an id.
Now that we stored this element in a variable print, we can place the text in it using the innerHTML property.
const button = document.querySelectorAll('.btn');
for(var i=0; i < button.length; i++) {
button[i].addEventListener('click', printLabel);
}
function printLabel(e) {
var target = e.target;
var parent = target.parentElement;
const name = parent.id;
const print = document.querySelector('#' + name + '-output');
print.innerHTML = name;
}
I created a JSFiddle to help you.
If you have any questions, please let me know.
<script>
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
<h1> do not print this </h1>
<div id='printMe'>
Print this only
</div>
<button onclick="printDiv('printMe')">Print only the above div</button>
We can use event bubbling and data attributes to our advantage here. Replace your label attribute which is non-standard with a data attribute. Also, don't use a if it is not a navigation element, use button instead.
//Get the divs
let divs = document.querySelectorAll("[data-label]")
for(var i = 0; i < divs.length; i++){
//Add the event listener to the DIVs, yes the divs
divs[i].addEventListener("click", function(event){
//Did a button fire the event?
if(event.target.tagName === "BUTTON"){
//update the output div in the clicked div
this.querySelector(".output").innerText = this.dataset.label;
}
});
}
<div class="container">
<div class="row">
<div class="col-md-3" data-label="a1">
<button class="btn btn-primary" role="button">Button 01</button>
<div class="output"></div>
</div>
<div class="col-md-3" data-label="a2">
<button class="btn btn-primary"role="button">Button 02</button>
<div class="output"></div>
</div>
<div class="col-md-3" data-label="a3">
<button class="btn btn-primary" role="button">Button 03</button>
<div class="output"></div>
</div>
<div class="col-md-3" data-label="a4">
<button class="btn btn-primary" role="button">Button 04</button>
<div class="output"></div>
</div>
</div>
</div>
just change your script part to the following to make it work without changing HTML
<script>
//getting all buttons
var buttons = document.getElementsByClassName("btn");
//adding event listner to all buttons
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", printLabel, false);
}
function printLabel() {
const outputDiv = this.parentElement.querySelector(".output"); // this will select only closet div with given class
outputDiv.innerText = this.parentElement.getAttribute("label");
}
</script>
how can the append count the index each time and when remove it can reset the entire index in js
$('button#add_ticket').click(function(e) {
$('#ticket_content').append(
`<div class="partials">
<div class="heading">
<div class='box'>
<div>
test
</div>
</div>
<div>
<button onclick="removeRow(this)" type="button" class="btn btn-primary">X</button>
</div>
</div>
</div>`
)
})
function removeRow(e) {
e.parentElement.parentNode.parentElement.remove();
}
here is the code
<div id='ticket_content'></div>
<button id='add_ticket' type="button"></button>
You don't need to use JS and index for counting your appended elements, you can simply use CSS:
MDN - Using_CSS_counters
$('#add_ticket').on("click", function(e) {
$('#ticket_content').append(
`<div class="partials__box">
<div class="heading d-flex">
<div class='box-header'>
<div class='header-box bases__text-bold bases__font--18'>
test
</div>
</div>
<div class='box-header'>
<button onclick="removeRow(this)" type="button" class="btn btn-primary">X</button>
</div>
</div>
<div class="body"></div>
</div>`
);
});
function removeRow(el) {
$(el).closest(".partials__box").remove();
}
#ticket_content {
counter-reset: ticket;
}
.partials__box::before {
counter-increment: ticket;
content: counter(ticket) ". ";
}
<div id='ticket_content'></div>
<button id='add_ticket' type="button">ADD</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I was tried to add forms using jQuery and it succeeded.
This time I'm trying to show and hide some buttons(#remove_form, #add_form)
but always not working:(
my jQuery codes(referred this question's answer):
$(document).ready(function(){
var index_num = 1;
var max_num = 7;
$("#add_form").click(function(e){
e.preventDefault();
if(index_num < max_num){
index_num++;
$("#event").each(function(){
$(this).clone().insertAfter(this).attr("id","event" + index_num);
$("#add_form" + index_num).css("display","none");
$("#remove_form" + index_num).css("display","inline");
});
}
});
$("#remove_form" + index_num).click(function(e){
e.preventDefault(); $(this).parent(".row collapse").remove(); index_num--;
});
});
+) I did not wrote "#add_form" button's css code. just this:
#remove_form{
display: none;
}
HTML codes:
<div class="row collapse" id="event">
<div class="small-2 large-2 columns">
<h7>example</h7>
</div>
<div class="small-2 large-2 columns">
<form>example</form>
</div>
<div class="small-2 large-2 columns">
<form>example</form>
</div>
<div class="small-1 large-1 columns">
<h7>example</h7>
</div>
<div class="small-2 large-2 columns">
<form>example</form>
</div>
<div class="small-1 large-1 columns">
<h7>example</h7>
</div>
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny alert" id="remove_form"></button>
</div>
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny" id="add_form"></button>
</div>
</div>
+) HTML codes after clicking '#add_form' button:
<div class="row collapse" id="event">...</div>
<div class="row collapse" id="event7">...</div>
<div class="row collapse" id="event6">...</div>
<div class="row collapse" id="event5">...</div>
<div class="row collapse" id="event4">...</div>
<div class="row collapse" id="event3">...</div>
<div class="row collapse" id="event2">
...
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny alert" id="remove_form"></button>
</div>
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny" id="add_form"></button>
</div>
</div>
How can I solve this problem?
You have to use the id attribute only when you know your item is unique.
If you have multiple id="event" then you need to use class="event" instead and $(".event").each instead of $("#event").each.
If my assumptions are correct, you are trying to make a copy of event form when you click on #add_form button. Then, it's advised to provide a remove button inside the #event form so that every clone has his own remove button and a single add button outside of the #event element.
If you put it that way it's not about Show/Hide rather Add/Remove DOM elements.
<div id="to_clone" style="display:none">
<div class="row collapse" class="event">
...
<div class="small-2 large-2 columns">
<button type="submit" class="button tiny alert" class="remove_form"></button>
</div>
</div>
</div>
<div id="events_container">
<button type="submit" class="button tiny" id="add_form"></button>
</div>
Jquery
$('#add_form').click(function(){
event=$("#to_clone").html();
$(this).before(event);
});
$(document).on('click', '.remove_form', function(){
$(this).closest(".event").remove();
return false;
});
In case you're wondering how to submit those forms you can add a function that translate inputs into json.
function getEventsJson()
{
var json='[';
$('.event').each(function()
{
json=json+'{ "field1": "'+$(this).find('.field1class').val()+'","field2": "'+$(this).find('.field2class').val()+'"},';
});
json=json.replace(/,\s*$/, "");
json=json+']'
return json;
}
Or provide for each event it's own form and submit them one by one.
$('.event').each(function()
{
var form=$(this).find('form');
$.ajax({
type:"POST",
url: "/events",
data: {
'event' : form.serialize(),
},
dataType: 'json',
success: function(data) {
},
error: function(data){
}
});
}
I'm not exactly sure what it is that i need, so the following explanation may not be clear - please let me know if not.
I want to slideToggle a specific clicked div, the code i currently have of course slideToggle's all instances of the div with a class of .open-statement, but i want to only toggle the one instance of this class that appears inside the parent div .agenda-content. There will be numerous instances of .open-statement on the page eventually, but only one of them should toggle (the one that's inside the current clicked div).
HTML
<div class="agenda-content">
<div class="row stance-row">
<div class="col-xs-3 no_padding">
1
</div>
<div class="col-xs-2">
Obamacare
<button class="btn btn-orange">Remove Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Wayne Rooney
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
<div class="row stance-row">
<div class="col-xs-3 no_padding">
2
</div>
<div class="col-xs-2">
Raise Minimum Wage
<button class="btn btn-orange">Take a Stance</button>
</div>
<div class="col-xs-2">
Add jQuery UI here
</div>
<div class="col-xs-2">
34
</div>
<div class="col-xs-2 no_padding">
Stephen King
</div>
</div>
<div class="row no-row-style">
<div class="open-statement">
<div class="col-xs-4 col-xs-offset-1">
<div class="your-statement">
<textarea placeholder="Please write your statement"></textarea>
<button class="btn btn-orange">Edit</button>
</div>
</div>
<div class="col-xs-7 no_padding">
<div class="statement-actions">
<button class="btn btn-alert">Deactivate</button>
<button class="btn btn-lt-secondary">View Debates</button>
<button class="btn btn-orange">Unsupport</button>
</div>
</div>
</div>
</div>
</div>
jQuery
$(document).ready(function () {
$(".stance-row").click(function () {
$(".agenda-content").find(".open-statement").slideToggle();
});
});
.agenda-content is the parent of all .open-statement. You need to be more specific. Use .next and .find() :
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next().find(".open-statement").slideToggle();
});
});
You are almost there, you just need to change your code to get respective next item.
$(document).ready(function () {
$(".stance-row").click(function () {
$(this).next("div.row").find(".open-statement").slideToggle();
});
});
DEMO : http://jsfiddle.net/6GMj7/
Cheers,
Ashok
Use this:
$(this).closest(".agenda-content").find(".open-statement").slideToggle();
I have the following HTML/JSP structure:
<div class="col-md-12 task task-box">
<c:if test="${not empty task.titulo}">
<div class="row">
<div class="col-md-12">
<h3 class="task-title">${task.titulo}</h3></div>
</div>
</c:if>
<div class="row">
<div class="col-md-12">
<pre class="task-descricao"><c:out value="${task.descricao}"/></pre>
</div>
</div>
<div class="row">
<div class="col-md-3">
<small class="task-data-criacao">
<i class="fa fa-calendar-o"></i> ${task.dataCriacao}</small>
</div>
<c:if test="${not empty task.dataExecucao}">
<div class="col-md-3">
<small class="task-execucao"><i
class="fa fa-calendar"></i> ${task.dataExecucao}</small>
</div>
</c:if>
<c:if test="${not empty task.arquivo}">
<div class="col-md-3">
<a href="${task.arquivo}" class="btn btn-link btn-sm">
<i class="fa fa-download"></i>
</a>
</div>
</c:if>
<div class="col-md-3"><i class="fa fa-dropbox"></i></div>
<div class="row">
<div class="container">
<div class="col-md-12">
<small class="task-tag"><i class="fa fa-tags"></i> ${task.tags}</small>
</div>
</div>
</div>
</div>
</div>
I will have multiple structures like this one since I'm using <c:forEach>. The wrapper class task.
How can I get the information such as, h3.task-title, pre.task-descricao and others when I click on a div.task with JQuery/JavaScript?
PS: I'm using <c:forEach> to multiply this structure with different inner values.
You can use the this keyword inside your event handler to access the element which triggered the event. Once you have this element, you can use the find function to find the relevant elements inside the target element.
$('div.task').click(function () {
var $title = $(this).find('h3.task-title');
var $descricao = $(this).find('pre.task-descricao');
//...
alert($title.text() + '\n' + $descricao.text());
});
Here is a live example.
using JQuery:
$( "#taskdiv" ).click(function() {
var title = $(".task-title").html();
var descricao = $(".task-descricao").html();
});
Info about jquery click:
http://api.jquery.com/click/
Infor about jquery selectors:
http://www.w3schools.com/Jquery/jquery_ref_selectors.asp