Dear bosses, consult. Js add attributes to label, then use the attribute node call onclick method di-CodePudding

 & lt; ! DOCTYPE html> 
 
 
<meta charset="utf-8"/& gt; 
  
 
<body> 
 
 
 
 
 
 
<script> 
Var inp_out=document. GetElementById (" con_value "); 
Var btn_cla=document. GetElementsByClassName (" BTN "); 
Var div_inr=document. GetElementById (" inner_text "); 
The function addText () {
Var op=document. The createElement method (" p "); 
Var ob=document. The createElement method (" button "); 
Ob. InnerHTML='x'; 
Ob. SetAttribute (' class ', "btn2"); 
Op. InnerHTML=inp_out. Value; 
Div_inr. The appendChild (op); 
Op. The appendChild (ob); 
inp_out.valuehttps://bbs.csdn.net/topics/='; 
} 
The function removeBtn2 () {
Var op2=this. ParentNode; 
Op2. ParentNode. RemoveChild (); 
} 
Btn_cla [0]. Onclick=addText; 
Var p1=document. GetElementsByTagName (" p "); 
//var b1=p1. GetElementsByClassName (" btn2 "); 
for(var i=0; iP1 [I] getElementsByClassName (" btn2 ") [0]. Onclick=function () {
//this. ParentNode. RemoveChild (enclosing parentNode) 
The console. The log (this) 
} 
} 
</script>

Original meaning is to click on add & lt; p> Label the x button to delete the trip, but click the x button have no reaction, is this why? Because can't use add node method is called, or where the code I write wrong??

CodePudding user response:

The main problem is you register to monitor events to delete button in the right place,

 
 
 
 
<meta charset="utf-8"/& gt; 
  
 
<body> 
 
 
 
 
 
 
<script> 
Var inp_out=document. GetElementById (" con_value "); 
Var btn_cla=document. GetElementsByClassName (" BTN "); 
Var div_inr=document. GetElementById (" inner_text "); 
The function addText () {
Var op=document. The createElement method (" p "); 
Var ob=document. The createElement method (" button "); 
Ob. InnerHTML='x'; 
Ob. SetAttribute (' class ', "btn2"); 
Op. InnerHTML=inp_out. Value; 
Div_inr. The appendChild (op); 
Op. The appendChild (ob); 
inp_out.valuehttps://bbs.csdn.net/topics/='; 
Ob. Onclick=function () {//& lt;====register event to add here 
Ob. Closest (" p "). The remove (); 
} 
} 
The function removeBtn2 () {
Var op2=this. ParentNode; 
Op2. ParentNode. RemoveChild (); 
} 
Btn_cla [0]. Onclick=addText; 
</script>

CodePudding user response:

 
<script> 
Var inp_out=document. GetElementById (" con_value "); 
Var btn_cla=document. GetElementsByClassName (" BTN "); 
Var div_inr=document. GetElementById (" inner_text "); 
The function addText () {
Var op=document. The createElement method (" p "); 
Var ob=document. The createElement method (" button "); 
Ob. InnerHTML='x'; 
Ob. SetAttribute (' class ', "btn2"); 
Op. InnerHTML=inp_out. Value; 
Div_inr. The appendChild (op); 
Op. The appendChild (ob); 
inp_out.valuehttps://bbs.csdn.net/topics/='; 
Ob. Onclick=function () {
Div_inr. RemoveChild (enclosing parentNode); 
} 
} 
The function removeBtn2 () {
Var op2=this. ParentNode; 
Op2. ParentNode. RemoveChild (); 
} 
Btn_cla [0]. Onclick=addText; 
</script>

CodePudding user response:

Con_value may be a const type of quantity, be system protection? Since the release may be restricted to whom?
Now most system does not support physical delete data, object release was delayed, similar operations are marked by the system, wait for system maintenance timing to perform the operation,
In addition, sometimes change display elements need to rewrite code (do not need to add a display element, but reduce the display elements when the operation is very important), need to know, to run the program is in the cache, the system will seldom repeated loading, unloading code,