Removing a Button from a Form Using JavaScript

Here is a snippet of my HTML code:

<form id="form">

<input id="deleteNumber" name="del" type="hidden" />
<input id="addAddress" name="addAddress" type="hidden" />

...
...
...

<a href="javascript:deleteAddress();" class="deleteItem"/></a>
<a href="javascript:addNextAddress()">Add address </a>
</form>

<script type="text/javascript">
function addNextAddress() {
    var parent = document.getElementById('form');
    var child = document.getElementById('form').del;
    perent.removeChild(child);
    document.getElementById('form').submit();   
}
</script>
<script type="text/javascript">
function deleteAddress() {
    var r=confirm(text);
    if (r == true) {
        var parent = document.getElementById('form');
        var child = document.getElementById('form').addAddress;
        perent.removeChild(child);
        document.getElementById('form').submit();
    }
}
</script>

I encountered a JavaScript error:

Uncaught ReferenceError: perent is not defined

Seeking assistance from anyone who can help. Thanks!

Answer №1

There appears to be a typo in the function below:

function addNextAddress() {
    var parent = document.getElementById('form');
    var child = document.getElementById('form').del;
    perent.removeChild(child);//<-- change perent to parent
    document.getElementById('form').submit();   
}

Answer №2

give it a shot

let main = document.getElementById('form');
let element = document.getElementById('form').addAddress;
main.removeChild(element);
document.getElementById('form').submit();

Alternatively, you can adjust Parent to perent :)

Answer №3

Update perent.removeChild(child) to parent.removeChild(child).

A correction is needed -- perent is not a recognized term in your code, resulting in the error message "perent is not defined".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message encountered in Express.js when trying to apply the ejs function: "View is not a constructor"

I am attempting to execute certain tasks before the original app.get function is called. After referring to this page, I applied their method which worked for the most part, except when using a rendering engine. The code snippet below demonstrates what I ...

Exploring ways to enhance Bootstrap Navigation by adding extra link options. Seeking a resolution using jQuery

Are you looking for a solution to handle site navigation with a larger number of links? When more links are added, they display in multiple lines which might not be the desired layout. You can view an example of this issue in the attached image: See here a ...

Is there a significant distinction between value and defaultValue in React JS?

React's homepage features the final illustration (A Component Using External Plugins) with a textarea: <textarea id="markdown-content" onChange={this.handleChange} defaultValue={this.state.value} /> While typing, the ...

What is the best way to retrieve specific feature properties in Open Layers 3 on-the-fly?

Within my map, I have two types: Point and Polygon, each with unique properties such as id, door number, and name. I have generated a list of features as follows: var features = new ol.format.GeoJSON().readFeatures(geojsonObject, { featureProjection: & ...

Lottie-web experiences a memory leak

Currently implementing lottie web on my front-end, but encountering persistent memory leaks. The JavaScript VM instance remains below 10MB when lottie is removed altogether. However, upon enabling lottie, the memory usage escalates rapidly whenever the pa ...

While utilizing the imodel.js front-end for designing a custom geometric model, I ran into an issue while trying to display it

Utilizing imodel.js front-end, I was able to design a customized geometric model featuring elements like a collection box. However, when placing the model within the existing SpatialViewState in bim, it failed to display properly in the current view. Sub ...

Unable to dispatch actions within the mounted lifecycle hook in Vuex?

Can anyone explain why the json data I fetch with axios is not populating my state.pages as expected? Interestingly, when I make a change to the file and vite reloads, the data appears on the page. However, it disappears again upon refreshing the browser. ...

Understanding Node.js document object

Hey, I'm currently trying to execute a JavaScript function on the server side using node.js, but I've encountered an issue. The function relies on accessing hidden values within the returned HTML using the document DOM, however, the document obje ...

The reason behind the delay in discord.js interactions caused by the "foreach" method

I'm just starting out with JavaScript programming and I have a Discord bot where one of the commands is supposed to silence everyone in a call. However, I noticed that the command first silences five users, creates a pause, and then proceeds to silenc ...

The data stored in a FormGroup does not automatically transfer to FormData

I am currently facing an issue with uploading multi-part data to my API. To achieve this, I have created a FormData object for the upload process. Initially, I gather all the necessary user input data such as an image (file) and category (string). These va ...

Coffeescript does not allow setting the AngularJS controller property as the last line of code

Having an issue while using Coffeescript to define a controller with the "HomeController as homeCtrl" syntax. angular.module('myApp.controllers',[]).controller("HomeController", -> @someArray = [] # return ) Encountering a problem ...

Executing an asynchronous function in React within the same file

Having trouble calling the removeCouponCode method from the same file, as the execution claims it's not defined. I'm unsure of what might be missing here. Any suggestions? Below is the file I am working on and attempting to modify. Not entirely c ...

Is it possible to deinitialize data tables (remove from memory)?

I'm currently utilizing data-tables (with jQuery) on my website. The particular data-table I have implemented seems to be consuming excessive memory in javascript, causing a slowdown in other functionalities. Is there a way for me to de-initialize th ...

An issue arises in Slate.js when attempting to insert a new node within a specified region, triggering an error

A relevant code snippet: <Slate editor={editor} value={value} onChange={value => { setValue(value); const { selection } = editor; // if nothing is currently selected under the cursor if (select ...

Is there a way to convert an empty string to zero in MySQL?

Can you help with answering my question? My question pertains to saving an empty string "" value in my table and storing it as a 0 value in the MySQL database. Here is a visual representation: Table -> MySQL "" 0 Thank you for your assi ...

Upon successful completion of the Ajax call, refresh the page without causing any blinking

Hey there, I'm facing an issue with my website, I've implemented ajax to fetch data from my API, and upon successful retrieval, I need to reload the page to display the information, However, sometimes the page blinks before reloading, while oth ...

Backbone.js experiencing synchronization issues exclusively in Internet Explorer

Can anyone confirm if they have encountered this issue before? I'm unsure how to elaborate further as it seems to be the only symptom. Additionally, it does not sync correctly in Internet Explorer. ...

Implementing fullCalendar's addEventSource function with the color customization feature

One feature of my application involves dynamically adding events to the calendar. function AddEventSourceDetailed(act_id) { $('#calendar').fullCalendar('addEventSource', function (start, end, callback) { var startTime = Mat ...

Instructions for attaching an event listener to a Threejs Mesh Object with the help of threex dom events

var domEvents = new THREEx.DomEvents(camera, view.domElement); var div = document.createElement( 'div' ); div.setAttribute('data-remove','mesh1'); div.className = 'close-me'; var label = new THREE.CSS2DObje ...

Positioning a material UI dialog in the middle of the screen, taking into account variations in its height

Dealing with an MUI Dialog that has a dynamic height can be frustrating, especially when it starts to "jump around" the screen as it adjusts to fit the content filtered by the user. Take a look at this issue: https://i.stack.imgur.com/IndlU.gif An easy f ...