Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

How can we delete specific child <div> inside the parent <div> tag?

user-image
Question added by Nauman Zafar , Software Developer , Air HeadQuarter, E-9 Islamabad
Date Posted: 2013/09/11
Khadijah Shtayat
by Khadijah Shtayat , Technical Lead , Opensooq

If you have this code for example 

<div id="parent">

<div>div one</div>

<div>div two</div>

<div>div three</div>

<div>

you have may way to delete aby element by using .removeChild() in javascript

 

var divList=document.getElementById("parent");

//i is the index of the element

var i=0divList.removeChild(divList.childNodes[i]);

 

you can use jqury .children() with .remove()

Mohamed Alabbas Mustafa
by Mohamed Alabbas Mustafa , Technician , OCSHI

by jQuery :

according to "Khadijah Shtayat"  example you can try

$("#parent").children("div").remove();

Nauman Zafar
by Nauman Zafar , Software Developer , Air HeadQuarter, E-9 Islamabad

What if we have Appended the <div> tag ?

 

 

//////////////   JAVASCRIPT PART/////////////////////////////

 

function displayHours()

{

 

var displayText;

var weekday = document.getElementById("weekday");

var hoursstart = document.getElementById("hours-start");

var hoursend = document.getElementById("hours-end");

var displayText = weekday.options[weekday.selectedIndex].text +"    "+hoursstart.options[hoursstart.selectedIndex].text+"  -  "+hoursend.options[hoursend.selectedIndex].text;

var displayTextID= "<div id='displayText"+TextID+"'>";

 

var removeText = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font face='verdana' size='2' color='blue'><a href='' onclick='removeHours("+TextID+")'>Remove</font></div>";

 

$('#hoursdisplay').append(displayTextID+displayText+removeText);

$('#hoursdisplay').append("<br/>");

 

$("#removeHours("+TextID+")").append(displayTextID+displayText+removeText);

 

 

 

TextID+=1;

}

function removeHours(TextID)

{

 

 

document.getElementById("displayText"+TextID).remove();

 

 

}

 

//////////////////////// HTML PART ////////////////////////////

 

<table  width="60%" border="0" cellpadding="5%"  bgcolor="#EFEFEF">

<tr align="left">

<th colspan="2" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="Hours" >Hours</label>

</th>

</tr>

<tr>

<td>

<div align="center" id="hoursdisplay">

</div>

</td>

</tr>

<tr align="center">

<td>

<select  id="weekday" >

<option value="0">Mon</option>

<option value="1">Tue</option>

<option value="2">Wed</option>

<option value="3">Thu</option>

<option value="4">Fri</option>

<option value="5">Sat</option>

<option value="6">Sun</option>

</select>

</td>

<td>

<select  id="hours-start">

<option value="6">6:00 am</option>

<option value="6.5">6:30 am</option>

<option value="7">7:00 am</option>

<option value="7.5">7:30 am</option>

<option value="8">8:00 am</option>

<option value="8.5">8:30 am</option>

<option value="9" selected>9:00 am</option>

<option value="9.5">9:30 am</option>

<option value="10">10:00 am</option>

<option value="10.5">10:30 am</option>

 

</select>

 

</td>

<td>

<select id="hours-end" >

<option value="6">6:00 am</option>

<option value="6.5">6:30 am</option>

<option value="7">7:00 am</option>

<option value="7.5">7:30 am</option>

<option value="8">8:00 am</option>

<option value="8.5">8:30 am</option>

<option value="9">9:00 am</option>

<option value="9.5">9:30 am</option>

<option value="10">10:00 am</option>

<option value="10.5">10:30 am</option>

 

</select>

</td>

<td>

<button type="button" value="submit" onclick='displayHours()' class="button" >Add Hours</button>

</td>

 

</tr>

 

<div id="Hrstext"></div>

</table>

More Questions Like This

Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.