Remove particular dynamic div using jQuery - javascript

I am using append to append some input data with div. After some appending, I have data as below :
<div id="holder">
</div>
var data = "<div id=1><input type='text' id='test_1' name='test_1'></div><div id=2><input type='text' id='test_2' name='test_2'></div>"
$("#holder").append(data );
I am appending data using append. Now, I want to remove particular div based on id.
For i.e. if id is 1 then remove this row. <div id=1><input type='text' id='test_1' name='test_1'></div> and like that for all.
I tried $("#holder").remove(), but it will remove all data. I want to remove particular div then what to do ?

yes $("#holder").remove() will remove everything because this is the parent div consisting of all child divs(like div id=1)
Its a bad practice to give as numericals like the way you are doing(id=1,id=2 etc)
Append some alphabets along with number like id=a1,id=a2....
to remove a particular div
try
$("#a1").remove()
from the comments above you have said that you will get the id from click
so try like below
$(selector).click(function(){
var id=//get the id of the div
$("#a"+id).remove()
});

I think this could work:
var theId = document.getElementById("1");
theID.remove();

Related

Delete only the particular Div Id

<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.

Write text Attribute inside of div tag

I need to know how i can add some javascript to add value inside text like below
The original div in HTML code like
<div> Text </div>
I need the some way to put an value inside the div appear in source like below
<div data-texe> Text </div>
I have try but its new for me
<script>
var div = document.getElementByDIV;
div.innerDIV += 'data-texe';
</script>
You want to set attribute?
var div = document.getElementById('yourid');
div.setAttribute('data','texe')
You will need to first find a way to identify your <div> elements, either with a unique ID or a class name. In this example I chose a unique ID:
<div id="test">Text</div>
If you want to add your data-texe attribute to all <div>s, you could use document.getElementsByTagName() and then loop over the results.
But let's stick to altering just one element for this example:
<script type="text/javascript">
// getElementByDIV is obviously not a valid function, so let's use
// one that finds an element by its ID:
var div = document.getElementById('test');
// The setAttribute function lets you add an attribute to the element
// The first parameter is the attribute name and the second is its value
// Attributes with no values are implicitly defined as empty string
div.setAttribute('data-texe', '');
</script>

How to convert some td from a table into textbox when a button is clicked

I have a table with 4 rows and 4 column. Also I have a button called edit.
Now when I click on that button, I want the last two columns of the table to be changed into textboxes with values of those columns and finally a save button to save them.
I do not have any identification for individual tds so facing a little problem in changing them into textboxes.
In html5 there is a feature that is called content editable.
you can make one html element editable with just adding one attribute to the html element
take an example of td element, if you want to make it editable, just add one "contenteditable" attribute to the td element
<td contenteditable>Some String</td>
in jQuery you can add the contenteditable attribute like this
$("td#target").attr("contenteditable", "");
After making it contenteditable you have to click on the html element, it will appear as an editable html element.
Hope this is helpful.
use .replaceWith() in jquery Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
$('tr td').slice(-2).each(function(){
$(this).replaceWith( $("<input/>",{value:$(this).text(),type:"text"}) );
//OR
// $(this).replaceWith( '<input type="text" value="'+$(this).text()+'">');
});
note in slice :Use negative numbers to select from the end of an array
DEMO
You have To use nth-child Selector to Get the required td element
Look Here:
<table>
<tr><td>John</td><td>John</td><td>John</td><td>John</td></tr>
<tr><td>Karl</td><td>John</td><td>John</td><td>John</td></tr>
<tr><td>Brandon</td><td>John</td><td>John</td><td>John</td></tr>
<tr><td>Benjamin</td><td>John</td><td>John</td><td>John</td></tr>
</table>
You Can Get Last 2 td Following Way
$( "tr td:nth-child(3)" ).html( "<input />" );
$( "tr td:nth-child(4)" ).html( "<input />" );
Fiddle:
Fiddle

How to select cell using jQuery id selector

I am getting ID of table cell using the following Javascript
var tempCell = e.target.parentNode.id;
Now I have to append a table in tempCell using jQuery like that
var htmlToAppend = '<table id="tbleSelectApproovers"></table>';
$(???).append(htmlToAppend);
I am not sure how to write the syntax to use id for the purpose to add table in td. What to write in place of question mark to add table in tempCell
You have to give id to td in id selector. Before id you need to give #
$('#idoftd').append(htmlToAppend);
If you can get the element by e.target.parentNode then you can pass it to jQuery method to make jQuery object out of it.
$(e.target.parentNode).append(htmlToAppend);
use escaping rule from selector http://api.jquery.com/category/selectors/
$('#e\\.target\\.parentNode\\.id').append(htmlToAppend);
or
$('[id="e.target.parentNode.id"]').append(htmlToAppend);
update:
$('#'+e.target.parentNode.id).append(htmlToAppend);
or
$('#'+tempCell ).append(htmlToAppend)
From the looks of it you are trying to append the element to the current elements parent so
var htmlToAppend = '<table id="tbleSelectApproovers"></table>';
$(e.target.parentNode).append(htmlToAppend);
easy way : keep an id or class attribute to the table cell like for example say
<td id="tablecellid">
now if you want to append anything keep it in a variable for readability
var data = ''
and do the following
$("#tablecellid").append(data);
Assuming your cell looks like this:
<td id='myfavcell'></td>
you would call
$('#myfavcell').append(htmlToAppend);
as jquery uses the css selector type (#) for locating element IDs.

How to insert cloned element with in HTML Markup String?

I am in need of cloning a div and then append it it in another location. The DIV is looks like this.
<div id="clonableContet" class="clonableClass">
<input id="Name" class="clonableInput" type="text"/>
<input id="Age" class="clonableInput" type="text"/>
</div>
<div id="clonedContentHolder"></div>
If i clone clonableContent and append it in clonaedContentHolder, it contains the same ID
as the previous one. I want change the cloned Content div's id attribute dynamically. But i able to add new class name dynamically to the cloned input Elements. I am good with it. I will able to get the values with some class name reference.
But my problem is i want make last cloned content to be visible. Because, all of these div's are tab contents. I am not able to change the clonableContent div's id.
I tried to create a another div dynamically, and put the cloned div within that. Its like this,
var html = "<div id='clonedContent" + count + "'>" + clonedContent + "</div>";
But the output is [Object][Object]. cloned div, becames object within the String.
How shall i insert the clonedContent within a string as another string?
Or, is there any other way to get the same solution.
Thanks in advance.
create the html as such:
var html = $("<div />").attr('id', 'clonedContent'+count).html(clonedContent);
Then you can use html as a jquery object and append to as the last item as such:
html.appendTo('div:last');
The best way I've found to do this is to append the object to an existing jQuery object:
var html = $("<div id='clonedContent" + count + "' />").append(clonedContent);
Non JQuery solution:
var div = document.createElement("div"); //create a new div
div.id="clonedContent" + count; // set the id with your counter
div.appendChild(clonedContent); //add the DOM reference you have
document.getElementById("clonedContentHolder").appendChild( div ); //add the content to div on page

Categories