hide css class delete_icon with reference/using button value - javascript

template.html
<td style="width:150px;"><input type="button" name="delete" value="{{ report_person.report_person.id}}" class="delete_icon" />{{report_person.report_person.name }}
</td>
The above row is created dynamically using python/django.Its the person name and delete icon.
For every row created dynamically,the delete icon will appear.
<td class="ir-shade" colspan="4"><button id="{{report_person.report_person.id}}" type="button" class="add_treatment" class="button_style">Add treatment notes</button>
<div id="result-{{report_person.report_person.id}}" class="toggle"></div></td>
Add treatment notes is a toggle button,it show the treatment details on one toggle,at this state the name of button become Hide treatment notes.
I want to hide the delete_icon class for individual name when the treatment note is open f.Since i am using comman css class for delete_icon,using this $('.delete_icon').hide(); is hiding the delete icon for all rows created dynamically.Only unique thing is the value of that delete button,that means the delete_icon.Is any possibility is their to hide the css class icon with reference to value.So that the delete image will hide only for cases the treatment notes are in open condition.
Note:It is some django code are used for passing variable,looks different from html.

In jQuery, you can use this to find child elements. Assuming that this is all in one div, or span, or some sort of container. You could simply search downwards from that container and toggle off your delete button.
$(this).children("input.delete_icon").hide();
Going off of your supplied template, you would use children and also .prev() to navigate up your DOM, and then back down.
Your code will roughly be:
$(this).closest('tr').prev().children(":first").children('input.delete_icon').hide();
Let's walk through this:
$(this) is your currently 'clicked' table row, that includes your
add_treatment button.
.closest('tr') looks UP for the nearest
table row. It will find the table row that your button is placed
inside of
.prev() looks for the previous sibling of the selected
object. Since we are currently selecting the <tr> your button is in
(as per our .closest('tr')) it will look for the previous <tr>
which is above it, and holds your delete_icon button.
Now, we are on the <tr> of your button object, but we need to navigate downwards
.children(":first") will navigate to the first child of the current element. This would be your first <td> element.
We need to navigate down one more, so we select the button child by using .children('index.delete_icon')
You have now "selected" your .delete_icon button, and can .hide() it.

Try using the jQuery .find() function.
$('.add_treatment').on('click', function() {
var $this = $(this);
$this.find('input[class*='delete_icon']').prop('disabled', true);
// toggle notes
// hide delete icon (if you do not like the css below)
});
Adding css rules would help reduce the amount of javascript functions/actions needed.
tr td .delete_icon {
display:none;
}
tr:hover td .delete_icon {
display:block;
}
There are other ways to do this that are more efficient but we would need more html structure.

if the delete icon is in the following td (created dynamically) you need:
$('.add_treatment').click(function(){
// should point to the parent td, the next td, its children,
// and hide the first child which is the input button
$(this).parent().next().children('.delete_icon').hide();
});

Related

How can I modify a list item after I created it with jQuery?

This is my todo list what I made.
(To make my code more readable I tried to comment. I hope it worked.)
If you try my demo, you can add li items with the "add" button. And the li items has 2 more buttons.
I want to create a modify button to users with can modifying their list items. I have no idea what I can to do for this with jQuery.
Second problem is that list buttons don't work perfectly well. Because if I use once a delete button it change the done button to delete an item. But if I dont use the delete button, the done button is working well.
I dont know why, maybe the same class name is the problem?
Here is my demo in JS Bin:https://jsbin.com/natiziqawa/edit?html,js,output
$(document).ready(function(){
$("#add").click(function(){
// Created list elements and their's buttons
var list_item =document.createElement("li");
var remove_button=document.createElement("button");
var done_button=document.createElement("button");
// append the buttons some string to caption buttons
$(remove_button).append("Delete");
$(done_button).append("Done");
// added class name the items to to distinguish them
$(list_item).addClass("item")
$(remove_button).addClass("delete");
$(done_button).addClass("done");
// filled the created items with the input values
var list_text =$("#input").val();
var time=$("#time").val();
// filled the list item with their's buttons and class names and input values
$(list_item).append(time," : ",list_text,done_button,remove_button);
// finally fill the ul with list items but first check out what is written in the input
if(input.value==""){
alert("Please enter an activity")
}
// If the input has some value can go
else{
$("ul").append(list_item);
// after clicked, clear the input field
$("#input").val("");
// list item's buttons
$(".done").click(function(){
$(list_item).click(function(){
$(this).css("color","white")
$(this).css("text-decoration","line-through")
});
});
$(".delete").click(function(){
$(list_item).click(function(){
$(this).remove()
});
});
}
});// main function close
}); // document ready close
The idea behind my solution is to use the contenteditable attribute for the added fields. To do this, you need to dynamically wrap the first two fields in an additional div, as shown here:
$(list_item).append('<div class="edit_item" contenteditable="true">'+time+'</div>'," : ",'<div class="edit_item" contenteditable="true">'+list_text+'</div>',done_button,remove_button);
You will need to replace this code with your existing one. For a better understanding, this code is located in the comment: "// filled the list item with their's buttons and class names and input values"
Also, you need to add this rule to the css to align the fields:
.edit_item {
display: inline-block;
}
And regarding the second question:
You had a targeting problem. You must refer to the current list_item using the closest() method.
For mark:
$(".done").click(function(){
$(this).closest(list_item).css("color","white")
$(this).closest(list_item).css("text-decoration","line-through");
});
For removing:
$(".delete").click(function(){
$(this).closest(list_item).remove();
});

AngularJS add/remove item from dynamic object

Currently I have problem with adding/removing content dynamically from my application.
Scenario: I have few buttons in each row of table. After click on specified button, its value + typename should be visible on list below table. Button should also get active-class.
On the other hand, click on ACTIVE button should remove specified item from list and should also remove active-class.
My idea of adding elements was to create empty itemsArray = [] and push into that array details about clicked elements. PS. I can click all buttons from all rows so all can be active.
Question: how to remove specified item? On what should I iterate ? Buttons in first row have indexes equal to 1,2,3...
Buttons in second row have indexes equal to 1,2,3... and all rows have the same.
Splice won't work because script doesn't know which index=1, index=2 should remove.
<tr ng-repeat="score in scores" ng-class-odd="'odd-row'" ng-class-even="'even-row'">
<td class="time">{{score.time}}</td>
<td class="result">{{score.result}}</td>
<td class="match-odds">
<a class="default-btn" ng-repeat="match_odd in score.match_odds">{{match_odd.value}}</a>
</td>
</tr>

selecting next element with class in table

I have a Task list in a table with 3 columns and multiple rows. In column 1 I have a checkbox. In column 2 I have some text and in column 3 I have a date and two icons which are hidden initially. When the checkbox is clicked I add a class to the row in which the clicked checkbox is contained. The class marks the item as "done". But adding the class alone is not enough, I also want to show the two icons which are hidden initially. So I only want to show the two on the row in which the clicked checkbox is contained.
Have been fooling around with next and parent and the rest of the family but not successfully.
Any help on this would be sweet!
at the moment what I have jquery wise is this
$('.task-checkbox').click(function() {
$(this).closest('tr').toggleClass('task-done');
$(this).parent().next('.done-n-delete-icons').toggle();
});
created a jsfiddle here http://jsfiddle.net/zf7HH/1/
Else , no need to toggle that other class, just use the one applied to tr :
.task-done .done-n-delete-icons {
display:block;
}
DEMO
With external ressource fixed : DEMO
You need to go up one more parent and then use the find method.
http://jsfiddle.net/zf7HH/2/
$('.task-checkbox').click(function() {
$(this).closest('tr').toggleClass('task-done');
$(this).parent().parent().find('.done-n-delete-icons').toggle();
});
$('.task-checkbox').click(function() {
$(this).closest('tr').toggleClass('task-done');
$(this).closest('tr').find('.done-n-delete-icons').toggle();
});

Selection panel - javascript radio button groups

I'm looking for a way to modify a page like this>
http://speckyboy.com/demo/digg-style-radio-buttons/index.html
so users can highlight one selection per row, IOW 8 radio button groups using a comparable visual style, not the traditional looking radio button controls.
I've tried nearly all the suggestions in stackoverflow I could find for handling radio button groups the last few days, but I clearly don't know enough js to adapt those suggestions properly. Can anyone help?
Can't you use the same id for all the radio buttons so that they work as a single entity? Then you can place them wherever you like.
You should use class(not ID, id must be unique on the page).
1 You can get all radio buttons
$('.class')
2 Now you can use each More details here http://api.jquery.com/each/
$('.class').each(function(index) {
// Add to element
});
3 To add you can with
http://api.jquery.com/add/
http://api.jquery.com/appendTo/
http://api.jquery.com/append/
http://api.jquery.com/html/
Just use a class for your elements - not sure if you were using radio buttons in the background or not like the example you posted
Minimized html
<div id='group1' class='radio'>
Group 1
<input type='radio' name='test'/>
</div>
<div class='row'>
<a href='#' class='c'>group 1a</a>
</div>​
jQuery
$('.row a').click(function(e){
e.preventDefault();
var $this = $(this);
$this.addClass('sel') // add class to currently clicked anchor
.siblings() // get siblings
.removeClass('sel'); // remove class from siblings
$('.radio').eq($('.row').index($this.parent())) // <-- get row of radios equal to this row
.find('input[type=radio]') // find the inputs radios under this
.eq($this.index()) // get radio with same index as clicked anchor
.click(); // trigger click
});​
http://jsfiddle.net/Lupw9/

Get index from table (the tr has no ID)

I'm dynamically creating and appending into a table, a <tr> and a <td> with the following code:
$("#table1").append(
'<tr>'+
'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">'+$("#DRVR_NAME").val()+'</td>'+
'</tr>');
It's Ok so far: I can load the Td data into another fields that I want and there's no problem on creating it.
But beyond creating it I must allow the user to remove the <td> dynamically, but as you can see, there's no ID to look for. What's the better way to allow the user to remove the <td> ?
Im trying the following code:
$("#table1>tbody>td>tr."+teste+"").remove();
But no success! The test variable is a number that I automatically define for the register.
Any help?
If test is the 0-based index of the row you want to remove...
$("#table1>tbody>tr:eq("+test+")").remove();
Set a unique id attribute when you dynamically create each cell.
<tr id="uniqueID"><td>Cell Content</td></tr>
Then use simple jquery to remove the row by id.
$('#uniqueID').remove();
Your remove code assumes there is a class on the TD. You'll have to target it with :eq() by referencing the value in your hidden field. If the value in the hidden field is a number (the index of the td the user selected = your counter), you could try something like this:
var hiddenFieldValue = $('input.hiddenFieldClassName').val();
$("#table1>tbody>tr>td:eq("+hiddenFieldValue+")").remove();
You could add a little x next to each driver name that will delete that td by changing your code a bit:
$("#table1").append('<tr>'+'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);">'+$("#DRVR_NAME").val()+'<span onclick="$(this.parentNode).remove()">x</span></td>'+'</tr>');
Or you could add another function to the click handler that you are binding to each <td> that will display a message in a predefined <div> asking the user if s/he wants to delete that element:
$("#table1").append('<tr>'+'<td style="cursor:pointer" onclick="pass.data.carregar(this.parentNode.rowIndex-2);askDelete(this);">'+$("#DRVR_NAME").val()+'</td>'+'</tr>');
and then define a message area (id = 'messageArea') somewhere in your HTML and the following function in your code:
askDelete(el){
var MA=$('#messageArea');
MA.empty();
MA.html('Do you want to delete ' + el.innerHTML + '?<br>').append('<span id="confirmDelete">delete</span> <span id="cancelDelete">cancel</span>')
MA.find('#confirmDelete').click(function(){$(el).remove();});
MA.find('#cancelDelete').click(function(){MA.empty();})
}
then style your delete and cancel buttons as you wish.

Categories