What is the best way to add a new li element to a ul list that shares the same class name

Question

What is the best way to add a new li element to a ul list that shares the same class name

Is there a way to add a new li element to the ul on the right side? Each card comes with a ul and a form.

After submitting the form, I want to append a new li to the corresponding ul. Each ul has a class of .topics. However, the new li is currently being added to all cards.

I am struggling with finding a solution to append the li inside the correct ul where it was created.

This shows my HTML structure

<div class="card" id="card1">
  <div class="card-body">
   <ul class="topics">
       <li>....</li>
       <li>....</li>
       <li>....</li>
   </ul>
  </div>
  <div class="card-footer">
      <form method="post" class="topic-form">
          ....
      </form>
  </div>
</div>

<div class="card" id="card2">
  <div class="card-body">
   <ul class="topics">
       <li>....</li>
       <li>....</li>
       <li>....</li>
   </ul>
  </div>
  <div class="card-footer">
      <form method="post" class="topic-form">
          ....
      </form>
  </div>
</div>

This displays my JS code

$('form.topic-form').submit( function (e) {
   e.preventDefault();
   var form = $(this)[0];
   $.ajax({
          ...ajax stuff...        
      },
      success: function (json) {
          form.reset();
          $(".topics").append('<li>.....</li>')
      }
   }
}

javascript html jquery css css-selectors

Answer 1

Answer №1

This particular line is causing trouble

$(".categories").append('<li>.....</li>')

...is executing without specifying a specific context, and searching across the board. It should be narrowed down to the ul connected to the section that initiated the action. The most sensible approach would be to locate the nearest section element with a class of .box and work from there.

$(this).closest('.box').find('.categories').append('<li>.....</li>')

Answer 2

This particular line is causing trouble

$(".categories").append('<li>.....</li>')

...is executing without specifying a specific context, and searching across the board. It should be narrowed down to the ul connected to the section that initiated the action. The most sensible approach would be to locate the nearest section element with a class of .box and work from there.

$(this).closest('.box').find('.categories').append('<li>.....</li>')

Answer 3

Answer №2

You must indicate the specific .topics you are referring to. In most cases, use $(this) (or form in your situation) to target the correct one.

$(this).closest('.card').find('.topics')

Answer 4

You must indicate the specific .topics you are referring to. In most cases, use $(this) (or form in your situation) to target the correct one.

$(this).closest('.card').find('.topics')

Answer 5

Answer №3

When submitting a form, first create a reference to the form using $currentForm = $(this);. Then, in the Ajax response, insert the li element by finding the parent card and appending it to the relevant topic:

$currentForm.parents(".card").find('.topics').append('<li>.....</li>');

It is important to note that the parents() method starts searching with the first parent element, while the closest() method starts with the element itself. There isn't much difference between them other than that.

Your Ajax code should look something like this:

$('form.topic-form').submit(function (e) {
      e.preventDefault();
      $currentForm = $(this);
      $.ajax({
            ...ajax stuff...        

       },
       success: function (json) {
            $currentForm.get(0).reset();
            // or $('form#myform').trigger("reset");
            $currentForm.parents(".card").find('.topics').append('<li>.....</li>');
      }
}

Here is a sample snippet to demonstrate this:

$(function() {
  $('form.topic-form').submit(function(e) {
      e.preventDefault();
      $currentForm = $(this);
      setTimeout(function() {
        let rand = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
      $currentForm.get(0).reset();
        $currentForm.parents(".card").find('.topics').append(`<li>${rand}</li>`);
      }, 1000);

  });
});

.card {
  width:45%;
  display:inline-block;
  border:1px solid black;
  vertical-align:top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="card" id="card1">
  <div class="card-body">
    <ul class="topics">
      <li>FOO from1</li>
    </ul>
  </div>
  <div class="card-footer">
    <form method="post" class="topic-form">
      <button>add</button>
    </form>
  </div>
</div>

<div class="card" id="card2">
  <div class="card-body">
    <ul class="topics">
      <li>BAR form2</li>
    </ul>
  </div>
  <div class="card-footer">
    <form method="post" class="topic-form">
      <button>add</button>
    </form>
  </div>
</div>

Answer 6

When submitting a form, first create a reference to the form using $currentForm = $(this);. Then, in the Ajax response, insert the li element by finding the parent card and appending it to the relevant topic:

$currentForm.parents(".card").find('.topics').append('<li>.....</li>');

It is important to note that the parents() method starts searching with the first parent element, while the closest() method starts with the element itself. There isn't much difference between them other than that.

Your Ajax code should look something like this:

$('form.topic-form').submit(function (e) {
      e.preventDefault();
      $currentForm = $(this);
      $.ajax({
            ...ajax stuff...        

       },
       success: function (json) {
            $currentForm.get(0).reset();
            // or $('form#myform').trigger("reset");
            $currentForm.parents(".card").find('.topics').append('<li>.....</li>');
      }
}

Here is a sample snippet to demonstrate this:

$(function() {
  $('form.topic-form').submit(function(e) {
      e.preventDefault();
      $currentForm = $(this);
      setTimeout(function() {
        let rand = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
      $currentForm.get(0).reset();
        $currentForm.parents(".card").find('.topics').append(`<li>${rand}</li>`);
      }, 1000);

  });
});

.card {
  width:45%;
  display:inline-block;
  border:1px solid black;
  vertical-align:top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="card" id="card1">
  <div class="card-body">
    <ul class="topics">
      <li>FOO from1</li>
    </ul>
  </div>
  <div class="card-footer">
    <form method="post" class="topic-form">
      <button>add</button>
    </form>
  </div>
</div>

<div class="card" id="card2">
  <div class="card-body">
    <ul class="topics">
      <li>BAR form2</li>
    </ul>
  </div>
  <div class="card-footer">
    <form method="post" class="topic-form">
      <button>add</button>
    </form>
  </div>
</div>

What is the best way to add a new li element to a ul list that shares the same class name

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to set the width of an element to 100% while accounting for padding

Error loading .OBJ files in Three.js on Azure, but works fine locally

What is the process of Defining an Element Based on Two Attributes in C#?

Create a music player application using the React context API

In JavaScript, the checkboxes in all columns of a table with over 200 rows can be set, but only the checkboxes in the rows

"Created a persistent fullscreen overlay over the body content, complete with scroll bars

Creating a responsive design using Bootstrap4

Sharing configurations between a Node.js application and client-side JavaScript

I am looking to serve static HTML files in Express.js while also retaining app.get() methods for handling server-side logic

Error in Next.js 13 due to Prisma table mapping causing hydration issues

The issue arises when AngularJS binding to a JSON object results in the value being

Ways to implement a custom scrollbar across an entire webpage:

Acquiring JSON data through the use of jquery and php

Angular: Built-in solution for managing unhandled HTTP errors

Leveraging Javascript Variable in Kendo Grid Template

vue-dropzone fails to create thumbnails when a file is added

What is the method for sending an AJAX request with a dynamically looping ID number parameter in the URL

How to position div elements in the center on screens smaller than 768px?

How to implement variables within the .map() function in JavaScript?

Tips for resolving CORS error in swagger-ui-express