HTML
<form class="data-table">
<div class="row">...</div>
<div class="row">...</div>
<div class="row>
<div class="col-lg-3">...</div>
<div class="col-lg-3">...</div>
<div class="col-lg-3">
<div class="has-box">
<input ...>
<button> ...</button>
<div class="modal">...</div>
<ul class="panel_toolbox">
<li>
<a class="close-link">
<i class="fa fa-close"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</form>
Inside <form>, there are multiple <div class="row">. Except for the first row, all the other rows have <i class="fa fa-close"> inside themselves. The purpose of my code is to allow users to remove a row by clicking 'x' icon. But in order to do that, I first need to know which row the user clicked.
JavaScript
$('.close-link').click(function () {
// if statement makes sure that the user doesn't remove the first row
if ($('form.data-table').children().length > 2) {
var $ROW = $(this).closest('.row');
$ROW.remove();
}
});
The above Javascript code works only for the second row, and from the third row, the remove icon won't work (first row is never to be removed, because it's a title row).
Here's how it looks like.
How can I edit my jQuery code so that I can detect which row the user clicked, and remove only that row?
++ Additional information
There is an "Add" button at the bottom, and new rows are added when I click the button. So, initially there are only two rows, title row and the input row. If I click add button, a new input row is added, and click is not recognized on the newly-added rows
Try this: You can use closest() function to find the parent div and then remove it. Use index to find the position of row so that first row will not be removed. Please check below code.
$(document).ready(function() {
$(document).on("click", ".close-link", function() {
var parent = $(this).closest(".row");
var index = parent.index();
if (index > 0) {
parent.remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="data-table">
<div class="row">...</div>
<div class="row">...</div>
<div class="row">
<div class="col-lg-3">...</div>
<div class="col-lg-3">...</div>
<div class="col-lg-3">
<div class="has-box">
<input value="This is value">
<button>Button</button>
<div class="modal"></div>
<ul class="panel_toolbox">
<li>
<a class="close-link">Close
<i class="fa fa-close"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</form>
Use closest('div.row').
Also change the length to 1
Example:
$('.close-link').click(function() {
// if statement makes sure that the user doesn't remove the first row
if ($('form.data-table').children().length > 1) {
var $ROW = $(this).closest('div.row');
$ROW.remove();
}
});
Update:(As per question update)
Use the following type click event for dynamically added rows also to work.
$("form.data-table").on("click", ".close-link", function() {
// if statement makes sure that the user doesn't remove the first row
if ($('form.data-table').children().length > 1) {
var $ROW = $(this).closest('div.row');
$ROW.remove();
}
});
Related
I created a button that changes text upon clicking. However, the action only works for the first button on the page. Any button further down in the code, that has the same action, doesn't work. How do I change the JS so that it allows for multiple firings of the event?
Thanks!
HTML:
<div class="addtocart">
<a href="#" class="add-to-cart">
<div class="pretext">
ADD TO CART
</div>
</a>
<div class="pretext done">
<div class="posttext"><i class="fas fa-check"></i> ADDED</div>
</div>
</div>
JS:
<script>
const button = document.querySelector(".addtocart");
const done = document.querySelector(".done");
console.log(button);
let added = false;
button.addEventListener("click", () => {
if (added) {
done.style.transform = "translate(-110%) skew(-40deg)";
added = false;
} else {
done.style.transform = "translate(0px)";
added = true;
}
});
</script>
I think what you want is to select all button elements. Using querySelectorAll.
This will return an array of DOM elements matching the query. Then you loop through and add the event listener to each.
What the above code does is, select the first instance of a DOM element with .addtocart, not every instance, then adds the event listener.
Here is example of working code. You need to use this keyword to get what you want.
<div class="addtocart">
<a href="#" class="add-to-cart" id="addToCardItem1" onclick="addToCart(this)">
<div class="pretext">
ADD TO CART
</div>
</a>
</div>
<div class="addtocart" id="addToCardItem1" onclick="addToCart(this)">
<a href="#" class="add-to-cart">
<div class="pretext">
ADD TO CART
</div>
</a>
</div>
<script>
function addToCart(elem) {
alert(elem.id);
}
</script>
I'm trying to create a To Do list, and when the user enters a new task, and clicks the button, the javascript should create a li element containing a span that holds the user's entry, then add that li element to the ol in my HTML.
My HTML looks like this:
<body>
<h1>To Do:</h1>
<section>
<input type="text" id="add_todo">
<span id="add_task_error"> </span>
<input type="button" id="add_task" value="Add task">
<div id="empty_message" class="open">
<h3>You have no tasks left to accomplish!</h3>
</div>
<div id="tasklist">
<ol class="list">
</ol>
</div>
</section>
</body>
This is the function that is not working:
var newSpan = $('<span>input</span>').addClass("task");
//wrap it in a <li> element
newSpan = (".task").wrap("<li></li>");
$(".list").append(newSpan);
I also tried it this way:
var new_task = $('<li>*</li>').addClass('task');
new_task.appendTo('ol.list');
new_task.setAttribute('id', 'new_task');
$("#new_task").text(input);
Both ways did not work- when I clicked the Add Task button (which is not the problem- I tested it), nothing happened on the screen...
What am I doing wrong???
Try this
$(document).ready(function(){
$('#add_task').click(function(){
var task = $('#add_todo').val();
var html = '<li><span>'+task+'</span></li>';
$('.list').append(html);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>To Do:</h1>
<section>
<input type="text" id="add_todo">
<span id="add_task_error"> </span>
<input type="button" id="add_task" value="Add task">
<div id="empty_message" class="open">
<h3>You have no tasks left to accomplish!</h3>
</div>
<div id="tasklist">
<ol class="list">
</ol>
</div>
</section>
Create the element, set all the attributes and when, you are done, add it to the ol.
var new_task = $('<li></li>').addClass('task');
new_task.text($("#add_todo").val()); //this is the value of the input
new_task.attr('id', 'new_task'); //use attr instead of setAttribute
new_task.appendTo('ol.list');
FIDDLE
Hope this works for you
JS code:
$("#add_task").click(function(){
var value = $("#add_todo").val();
$(".list").append("<li class='task'><span>"+ value +"</span></li>")
});
Here is the working Plnkr
This should be your code.
Call addLI() on click of your button
<input type="button" id="add_task" value="Add task" onclick="addLI()">
function addLI() {
//check for empty value
if ($('#add_todo').val() == "") {
alert("Please Add Todo.");
return;
}
//generate html for li
var html = "<li class='task' id='new_task'><span>" + $('#add_todo').val() + "</li>";
//append li to order list
$(".list").append(html);
}
Also try to hide the div on which you are showing the message before adding any new task.
<div id="empty_message" class="open">
<h3>You have no tasks left to accomplish!</h3>
</div>
$('.open').hide(); on click event of add task
i have a html like this,
<div class="main">
<ul>
<li ng-repeat='save in saves'>
<h3>{{save.name}}</h3>
<div >
<ul>
<li ng-repeat='story in stories'>
<div ng-show="story.display"><label>welcome</label></div>
<div ng-show="!story.display"><input type="text"></div>
</li>
</ul>
</div>
<div ng-click="add()">Click</div>
</li>
</ul>
<div ng-click="theme()">Add theme</div>
</div>
my contoller like this
$scope.saves=[];
$scope.stories=[];
$scope.theme=function()
{
$scope.saves.push({name:'joseph',name:'john',name'peter'});
};
$scope.add=function()
{
$scope.stories.push({display:'false'});
};
Here i am doing this ,
When user click on addtheme button i am pushing name into saves (Array) and then repeating it with li tag so out put like this
joseph
click
john
click
peter
click
so when again user click on click , i want to show only one textbox for specific clicked li..but here what happened , when i click on click button it is showing three text box for three li tag....
How to open specific textbox?
your can replace
<div ng-show="!story.display"><input type="text"></div>
to
<div ng-hide="story.display"><input type="text"></div>
I've tried my best to figure this out myself but to no avail as I'm new to web development. It's probably really basic but I'd really appreciate some help because I'm going around in circles here..
I have a Google map search form (essentially a store locator) and what I've done for the search results is split into two tabs; a list and a map.
What I would like to do is have the map tab always be the active tab when the submit button is pressed in the search form.
This is the HTML code:
<ul class="nav nav-tabs" id="myTab">
<li id="maptab" class="active">Map</li>
<li id="listtab" >List</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="resmap">
<div id="map_canvas"></div>
</div>
<div class="tab-pane" id="reslist">
<div id="results">
<ul class="res-list" id="list"></ul>
</div>
</div>
</div>
So basically for the map items I'm trying to get the code to return to
div class="tab-pane active"
and
li class="active"
Presumably I have to add an onclick element to the submit button??
The html for the submit button in the form is
<input type="submit" name="op" id="edit-submit" value="Search" class="btn btn-primary" />
In your case, I presume you are trying to add the "active" class to that li element:
var button = document.getElementById('edit-submit');
button.onclick= function() {
// this adds the 'active' class to the classes that the element already has
var maptab = document.getElementById('maptab');
maptab.className = maptab.className + ' active';
};
I have few td in my code.
The scenario is when I click on a td,the content below the td which is hidden on load needs to be displayed .
I have few events to handle with the elements in the dropdown.
I have used the same structure for all the tds, the problem is when I click on the first td, the dropdown appears and when I click on the second td, the dropdown elements coded in the second td also appears.
My scenario is when I click on any td, the dropdowns present below that td alone should appear and the other dropdown should disappear if they are shown.
My code is as follows:
$("#timeofday p").bind('click',function(event){
$(this).parent().find(" > .dropdown").slideToggle();
$(this).text($(this).text() == 'CLOSE' ? 'AFTERNOON' : 'CLOSE');
});
my html is as follows:
<tr>
<td id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>
<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>
<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>
<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
<td id="timeofday" class="avbltyltblue">
<p>AFTERNOON</p>
<div id="dropdown" class="dropdown">
<div style="padding:10px 0"><button class="up" style="width:100px">UP</button></div>
<ul class="tlist">
<li>1:00PM</li>
<li>2:00PM</li>
<li>3:00PM</li>
<li>4:00PM</li>
<li>5:00PM</li>
<li>6:00PM</li>
<li>7:00PM</li>
<li>8:00PM</li>
<li>9:00PM</li>
<li>10:00PM</li>
</ul>
<div style="padding:10px 0"><button class="down" style="width:100px">DOWN</button></div>
</div>
</td>
</tr>
Well, this seems to work:
$("#timeofday p").click(function(event){
$("#timeofday .dropdown").slideUp();
$("#timeofday p").text($("#timeofday p").text('CLOSE') );
$(this).parent().find(" > .dropdown").slideToggle();
$(this).text($(this).text('AFTERNOON') );
});
Here's an example http://jsfiddle.net/9LkDU/4/
onclick -- hide the element by making its visibility:hidden or display:none with JS..
var div = document.getElementById("idOfYourElementToBeHidden");
div.style.visibility="hidden"; // this preserves the space occupied by the div
div.style.display="none"; // this frees up the space occupied by tat div