How-I-can-remove-dynamic-elemens-by-id

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>


.skill{;width:80%;float:left;text-align:center;}
.skillbutton{
width:20%;
padding:10px;
float:right;
bordr:none;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
margin-top:10px;
}
.skilllearn{
width:70%;
padding:10px;
float:right;
margin-top:10px;


}
.skilltitle{
width:40%;
padding:10px;
float:right;
margin-top:0;
margin-right:20px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;

}
.skillmastery{
width:40%;
padding:10px;
float:right;
margin-top:0;
margin-right:20px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
border:none;
}
</style>

<body>



<div class="skill" id="addskill">
<div class="skilltitle" id="skilln">
</div>

<div class="skillmastery" id="skillm">
</div>
</div>



<button value="add" onclick="add()">add</button>
<script>
function add(){
var skill=document.getElementById("addskill");
var skilltitle=document.getElementById("skilln");
var skillmastery=document.getElementById("skillm");


  var myselect = document.createElement("select");

var myoption=document.createElement("option");

var myoption2=document.createElement("option");
var myoption3=document.createElement("option");
var myoption4=document.createElement("option");
var t1 = document.createTextNode("ضعیف");
var t2 = document.createTextNode("متوسط");
var t3 = document.createTextNode("پیشرفته");
var t4 = document.createTextNode("حرفه ای");
myoption.appendChild(t1);
myoption2.appendChild(t2);
myoption3.appendChild(t3);
myoption4.appendChild(t4);
myselect.appendChild(myoption);
myselect.appendChild(myoption2);
myselect.appendChild(myoption3);
myselect.appendChild(myoption4);
  var myinput = document.createElement("input");
  myinput.type="number";
  
var btn = document.createElement("BUTTON");   
var btn2 = document.createElement("BUTTON");
var btn3 = document.createElement("BUTTON");    
var t = document.createTextNode("عنوان مهارت");

var t2 = document.createTextNode("میزان تسلط");
var t3 = document.createTextNode("delete");  
btn.appendChild(t); 
btn2.appendChild(t2);
btn3.appendChild(t3);
myselect.setAttribute("class", "skilllearn");
myinput.setAttribute("class", "skilllearn"); 
btn.setAttribute("class", "skillbutton");
btn2.setAttribute("class", "skillbutton");
btn3.setAttribute("class", "skillbutton");
btn3.onclick = function() { 
var child=document.getElementById("skillm").getElementsByTagName('select')[0];
skillmastery.removeChild(child);

  }
skilltitle.appendChild(btn);
skilltitle.appendChild(myinput);
skillmastery.appendChild(btn2);
skillmastery.appendChild(myselect);
skilltitle.appendChild(btn3);



}
</script>


</body>
</html>

Just change the ID according to your div name. You can also USE JQUERY(it is easy to use almost all kind of solution suggested by theme)

var element = document.getElementById(“element-id”);
element.parentNode.removeChild(element);

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.