Функция удаления в java-скрипте удалит первый индекс

Сценарий:

Есть 5 div с кнопкой удаления. Я нажимаю кнопку удаления div 5, вместо этого будет удален div 5, первая строка будет удалена.

Пожалуйста, проверьте мой код ниже:

delete row() function:

function delete_row(no)
{
    if (confirm("Are you sure you want to delete?")) {
         document.getElementById("row"+no+"").outerHTML = "";
    } else 
     alert("Data is not deleted");
}

кнопка удаления сделана

var table=document.getElementById("data_table");
            var table_len=(table.rows.length)-1;
            var row = table.insertRow(table_len).outerHTML=
            "<div class='myrow'><div id='row"+table_len+"'><img id='image_row"+table_len+"' src = "+new_image+"><div id='title_row"+table_len+"' class='titleData'>"+new_title+
            "</div><div class='descData' id='description_row"+table_len+"'>"+new_description+"</div><div><input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'><input type='button' value='Edit' class='edit' onclick='edit_row("+table_len+",this)'></div></div></div>";

            document.getElementById("new_image").value = "";
            document.getElementById("new_title").value = "";
            document.getElementById("new_description").value = "";

Пожалуйста, добавьте HTML ....

— 27.06.2018 08:33

важная вещь, которую вам нужно показать, это как называется delete_row

— 27.06.2018 08:33

Вы проверили значение «нет»? Вы проверили идентификатор, который удалили? Вы просто публикуете вопрос, но не публикуете свои попытки.

— 27.06.2018 08:33

Можете добавить HTML?

— 27.06.2018 08:34

Я обновил код выше

— 27.06.2018 08:35

создайте fiddle всего вашего кода, какие типы div созданы ...!

— 27.06.2018 08:47

javascript crud

27.06.2018 08:31

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 3

попробуйте этот демонстрационный код и установите свои данные следующим образом

function delete_row(no) {
  if (confirm("Are you sure you want to delete?")) {
    document.getElementById("row" + no + "").outerHTML = "";
  } else
    alert("Data is not deleted");
}

div {
  border: 1px solid #ddd;
  width: 100px;
  padding: 10px;
}

<div id = "row1" onclick = "delete_row(1)">
  1
</div>
<div id = "row2" onclick = "delete_row(2)">
  2
</div>
<div id = "row3" onclick = "delete_row(3)">
  3
</div>
<div id = "row4" onclick = "delete_row(4)">
  4
</div>
<div id = "row5" onClick = "delete_row(5)">
  5
</div>

27.06.2018 08:40

Вот пример удаления правильного div:

var index = 1;

function add(){
  var table = document.getElementById("data_table");
  var table_len = (table.rows.length) - 1;
  var new_image = "new_image"+index;
  var new_title = "new_title"+index;
  var new_description = "new_description"+index;
  index++;
  var row = table.insertRow(table_len).outerHTML =
      "<div class='myrow'><div id='row" + table_len + "'><img id='image_row" + table_len + "' src = " + new_image + "><div id='title_row" + table_len + "' class='titleData'>" + new_title +
      "</div><div class='descData' id='description_row" + table_len + "'>" + new_description + "</div><div><input type='button' value='Delete' class='delete' onclick='delete_row(this);'><input type='button' value='Edit' class='edit' onclick='edit_row(" + table_len + ",this)'></div></div></div>";
}
function delete_row(target){
    console.info(target.parentNode.parentNode.parentNode.remove());
}
// add first item
add();

<button id = "add" onclick = "add();">
add
</button>

<table id = "data_table">

</table>

27.06.2018 08:47

Надеюсь, следующий код вам подходит.

HTML код

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>Document</title>
</head>
<body>
  <div id = "main">
    <div>One <button class = "btn">Delete</button></div>
    <div>Two <button class = "btn">Delete</button></div>
    <div>Three <button class = "btn">Delete</button></div>
    <div>Four <button class = "btn">Delete</button></div>
    <div>Five <button class = "btn">Delete</button></div>
  </div>
</body>
</html>

Код JavaScript

document.querySelector('#main').addEventListener('click', function(e){
    console.info(e.target.parentElement.remove());
});

https://jsfiddle.net/kdtm9vLe/21/

27.06.2018 09:06

Другие вопросы по теме

CRUD ConnectionStrings во время выполнения в приложении C# winform

Javascript CRUD

Dynamics CRM sdk - Подключение с помощью вспомогательного кода

Поиск порядка между двумя датами Hibernate, Spring Boot

Как указать, какую схему использовать один раз?

Mongodb против операции CRUD с использованием весенней загрузки

Как отслеживать, когда отдельный пользователь просматривал объект

Два экземпляра PHP CRUD в синглтоне

Vue управление состоянием редактирования формы, шаблонный код

Дизайн REST - Обновление большого ресурса множеством связанных моделей

Функция удаления в java-скрипте удалит первый индекс

Ответы 3

Другие вопросы по теме

Похожие вопросы