15617

Remove Dynamic Element With Javascript [closed]

<h3>Question</h3>
<b>Closed.</b> This question is not reproducible or was caused by typos. It is not currently accepting answers. <hr class="my12 outline-none baw0 bb bc-powder-2" /> <svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M15 6.38A6.48 6.48 0 007.78.04h-.02A6.49 6.49 0 002.05 5.6a6.31 6.31 0 002.39 5.75c.49.39.76.93.76 1.5v.24c0 1.07.89 1.9 1.92 1.9h2.75c1.04 0 1.92-.83 1.92-1.9v-.2c0-.6.26-1.15.7-1.48A6.32 6.32 0 0015 6.37zM4.03 5.85A4.49 4.49 0 018 2.02a4.48 4.48 0 015 4.36 4.3 4.3 0 01-1.72 3.44c-.98.74-1.5 1.9-1.5 3.08v.1H7.2v-.14c0-1.23-.6-2.34-1.53-3.07a4.32 4.32 0 01-1.64-3.94zM10 18a1 1 0 000-2H7a1 1 0 100 2h3z"></path></svg> <p class="mb0"> <b>Want to improve this question?</b> Update the question so it's on-topic for Stack Overflow.

<p class="mb0 mt6">Closed 4 years ago.

</aside>

I make a form with dynamic elements with Javascript. I can add BUT I can't remove! I can't Solve Problem. I'm confused! :(

My Code:

<pre class="snippet-code-html lang-html prettyprint-override"><script type="text/javascript"> //+Element function addElement(div) { var ni = document.getElementById(div); var numi = document.getElementById('numVal'); var num = (document.getElementById('numVal').value -1)+ 2; numi.value = num; var newdiv = document.createElement('div'); newdiv.setAttribute('id',num); var unum="'"+div+"','"+num+"'"; newdiv.innerHTML ='<input id="t" type="tel" placeholder="Tel.'+num+'" name="t'+num+1+'"><img id="del" onClick="removeElement('+unum+');" alt="del" src="images/del.gif" />'; ni.appendChild(newdiv); } //-Element function removeElement(divNum,div) { var d = document.getElementById(div); var olddiv = document.getElementById(divNum); d.removeChild(olddiv); } </script> <form> <input type="hidden" value="0" id="numVal" /> <div id="m"> <div id="h125"> <div class="fb"> <input id="t" type="tel" placeholder="Tel."> <img id="add" Alt="add" src="images/add.gif" onclick="addElement('h125');" /> </div> </div> </div> </form>

Thanks


<h3>Answer1:</h3>

Is this what you are trying to achieve? If so, when you mixed up ids in removeElement function.

<pre class="snippet-code-js lang-js prettyprint-override">//+Element function addElement(div) { var ni = document.getElementById(div); var numi = document.getElementById('numVal'); var num = (document.getElementById('numVal').value -1)+ 2; numi.value = num; var newdiv = document.createElement('div'); newdiv.setAttribute('id',num); var unum="'"+div+"','"+num+"'"; newdiv.innerHTML ='<input id="t" type="tel" placeholder="Tel.'+num+'" name="t'+num+1+'"><img id="del" onClick="removeElement('+unum+');" alt="del" src="images/del.gif" />'; ni.appendChild(newdiv); } //-Element function removeElement(divNum,div) { var d = document.getElementById(divNum); var olddiv = document.getElementById(div); d.removeChild(olddiv); } <pre class="snippet-code-html lang-html prettyprint-override"><form> <input type="hidden" value="0" id="numVal" /> <div id="m"> <div id="h125"> <div class="fb"> <input id="t" type="tel" placeholder="Tel."> <img id="add" Alt="add" src="images/add.gif" onclick="addElement('h125');" /> </div> </div> </div> </form>
<h3>Answer2:</h3>

document.getElementsById(divNum); should read: document.getElementById(divNum);

You need to delete the 's' after element. update Sorry, I didn't test before I answered. When you declare var unum in your addElement(div) function, you have your variable names backwards. It should read var unum="'"+num+"','"+div+"'";

来源:https://stackoverflow.com/questions/36575161/remove-dynamic-element-with-javascript

Recommend

  • How to hide all post's having certain labels on home page in Google Blogger?
  • hereNow not working as expected
  • import mongoose schema into another schema file makes the imported schema undefined
  • Enable a text box only when 1 of the radio button is clicked
  • React Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Correctly Allocate And Fill Frame In FFmpeg
  • How do I get the standard Vim FTP command to work?
  • Winston logger not write to file
  • Trigger powershell based on event log
  • VB.NET and LINQ - Group by in a DataTable
  • Jenkins sending notifications to the wrong commit id
  • Use PHP to Replace HTML with HTML
  • How to get a time and Date Separately?
  • How to get the Owner of the ContextMenu (from Silverlight 4 toolkit)?
  • Pandas time series data Index from a string to float [duplicate]
  • AWS RDS Parameter Group not changing MySQL encoding
  • What does “T extends Junk” mean in a generic class in Java?
  • 'Edit' function for forum posts and such
  • How do I use libcurl to printf a remote FTP directory listing?
  • JQuery: Infinite input select
  • How to clear a browser cache in Protractor
  • How to use Streams api peek() function and make it work?
  • Terminal run dalvikvm with am.jar
  • Android: Unable to detect vertical plane
  • How to decleare char *const argv[] in swift [duplicate]
  • How to handle div that is created dynamically in a table
  • Bind selectedDates Aggregation for Calendar
  • Update cell query for Excel ADO from Delphi
  • How to get rgb from transparent pixel in js
  • Make checkout phone field optional for specific countries in WooCommerce
  • How to use FirstOrDefault inside Include
  • WPF custom control and direct content support
  • PHP Permalinks.. how to change?
  • media foundation H264 decoder not working properly
  • Running R's aov() mixed effects model from Python using rpy2
  • Access to a Matlab gui from the web
  • ReferenceError: TextEncoder is not defined