Is there a way for me to choose the ID and retrieve its value from the input data within this particular row?

Question

Is there a way for me to choose the ID and retrieve its value from the input data within this particular row?

Here is what I am trying to accomplish.

When the modify button is clicked, I want the div with role 'ucomment' to transform into an input form with its original value pre-filled.

However, I am having trouble selecting the specific div.

I attempted to use the following code to target the desired element, but it did not work as expected.

$(this).closest("div[role='ucomment']")

How can I correctly select the div in this situation?

<ul id="comments" class="list-group">
<script id="commentTemplate" type="text/x-handlebars-template">
    {{#each list}}
      <li class="list-group-item d-flex justify-content-between align-items-center">
          <div class="row w-100">
            <div class="col-2" name="uid">{{uid}}</div>
            <div class="col-8" role="ucomment" name="ucomment">{{ucomment}}</div>
            <div class="col-2" name="regdate">{{prettifyDate regdate}}</div>
          </div>
            <button type="button" class="btn" onclick="modifyComment()">Modify</button> 
            <button type="button" class="btn" onclick="deleteComment()">Delete</button> 
        <span class="badge badge-primary badge-pill">14</span>
      </li>
    {{/each }}
</script>
</ul>
        <button id="sendForm" type="submit" class="btn btn-info" onclick="addComment()">Send</button>
        <button id="cancel" type="button" class="btn btn-warning" data-toggle="collapse" data-target="#openNew">Cancel</button>
    </div>

javascript jquery html css

Answer 1

Answer №1

This code snippet will help you locate the div:

this.closest("li").querySelector("div[role='ucomment']")

In JavaScript, the closest() method only traverses upwards in the DOM hierarchy by selecting parent elements. Therefore, using it allows you to find the closest li element and then use the find() method with the selector div[role='ucomment'] within that li element.

// This script fetches all modify buttons as a NodeList and converts it into an array
const modifyBtns = Array.from(document.querySelectorAll('.btn.btn-modify'));

// Iterate over each button...
for (const modifyBtn of modifyBtns) {
  // Attach an event listener for the click event, binding the handler to each modifyBtn
  modifyBtn.addEventListener('click', modifyComment.bind(modifyBtn));
}

function modifyComment(e) {
  this.closest("li").querySelector("div[role='ucomment']").style.color= 'red';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <div class="row w-100">
      <div class="col-8" role="ucomment" name="ucomment1">{{ucomment}}</div>
    </div>
    <button type="button" class="btn btn-modify">Modify</button>
  </li>
  <!-- More list items here... -->
</ul>

Note: It appears that using inline event handlers like onclick may not pass the event correctly. As a solution, I've modified your code to utilize vanilla JavaScript instead of jQuery since closest behaves differently between the two libraries. Additionally, it's recommended to avoid inline event handlers and opt for addEventListener() for better practice.

Answer 2

This code snippet will help you locate the div:

this.closest("li").querySelector("div[role='ucomment']")

In JavaScript, the closest() method only traverses upwards in the DOM hierarchy by selecting parent elements. Therefore, using it allows you to find the closest li element and then use the find() method with the selector div[role='ucomment'] within that li element.

// This script fetches all modify buttons as a NodeList and converts it into an array
const modifyBtns = Array.from(document.querySelectorAll('.btn.btn-modify'));

// Iterate over each button...
for (const modifyBtn of modifyBtns) {
  // Attach an event listener for the click event, binding the handler to each modifyBtn
  modifyBtn.addEventListener('click', modifyComment.bind(modifyBtn));
}

function modifyComment(e) {
  this.closest("li").querySelector("div[role='ucomment']").style.color= 'red';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <div class="row w-100">
      <div class="col-8" role="ucomment" name="ucomment1">{{ucomment}}</div>
    </div>
    <button type="button" class="btn btn-modify">Modify</button>
  </li>
  <!-- More list items here... -->
</ul>

Note: It appears that using inline event handlers like onclick may not pass the event correctly. As a solution, I've modified your code to utilize vanilla JavaScript instead of jQuery since closest behaves differently between the two libraries. Additionally, it's recommended to avoid inline event handlers and opt for addEventListener() for better practice.

Answer 3

Answer №2

If you want to trigger the modifyComment() function by clicking on a button, you can access the parent element and locate the specific div within it.

<button type="button" class="btn" onclick="modifyComment(this)">Modify</button>

    function modifyComment(elem) {
            let parent = $(elem).parent();

            parent.find($("div[role='ucomment']")).css("background", "red");
            console.log(parent);
        }

Alternatively, if you prefer to update the html of the button itself, you can make changes inside the modifyComment function:

$(element).parent().find("div[role='ucomment']").css("background-color","red")

Answer 4

If you want to trigger the modifyComment() function by clicking on a button, you can access the parent element and locate the specific div within it.

<button type="button" class="btn" onclick="modifyComment(this)">Modify</button>

    function modifyComment(elem) {
            let parent = $(elem).parent();

            parent.find($("div[role='ucomment']")).css("background", "red");
            console.log(parent);
        }

Alternatively, if you prefer to update the html of the button itself, you can make changes inside the modifyComment function:

$(element).parent().find("div[role='ucomment']").css("background-color","red")

Answer 5

Answer №3

Is it possible to achieve this with plain vanilla JavaScript?

document.getElementsByClassName("ucomment")[0];

Please let me know if this solution is effective.

You can then utilize jQuery's click function to identify the element being clicked and perform specific actions if it's a "div".

$("*", document.body).click(function(e) {
  e.stopPropagation();
  var element = $(this).get(0);
  if (element.tagName == "div") {
    //perform desired actions here
   }
});

Answer 6

Is it possible to achieve this with plain vanilla JavaScript?

document.getElementsByClassName("ucomment")[0];

Please let me know if this solution is effective.

You can then utilize jQuery's click function to identify the element being clicked and perform specific actions if it's a "div".

$("*", document.body).click(function(e) {
  e.stopPropagation();
  var element = $(this).get(0);
  if (element.tagName == "div") {
    //perform desired actions here
   }
});

Is there a way for me to choose the ID and retrieve its value from the input data within this particular row?

Answer №1

Answer №2

Answer №3

Similar questions

Is it better to utilize a sizable JavaScript file or opt for a compact one?

Having issues with contenteditable functionality not functioning properly on elements that are dynamically generated

Leveraging the CSS-Element-Queries Library for emulating the functionality of CSS media queries

Utilizing Sharepoint - accessing the Sp.Web.currentUser Property

Autocomplete for Converting Postal Codes to Cities

Tips for Bridging the Space in a Horizontal Bootstrap Card

Tips for initiating a jQuery form submission

Calculating duration of ajax request

Do form validations affect the values assigned to ng-model objects?

Babel fails to substitute arrow functions

Eliminating replicated vertices in a Three.js geometry model

Staying connected with Ajax

Arranging based on attribute data

The JavaScript forEach loop is compatible with every web browser except for Internet Explorer

Apply pointer style to the CSS only when a division contains text

Is there a way to merge two functions that are triggered by the same class name?

The behavior of the select menu is erratic when interacting with AJAX

What is the Next.js equivalent of routing with rendering capability for nested component paths?

How can we stop Vuetify from overwriting Bootstrap3's classes when using treeshaking?

Vue paired with Rainyday.js