Jquery Django和AJAX-replace不替换我的元素，而是添加它，而不是删除原始元素

我正在对django应用程序进行AJAX调用，以更新页面上的数据而不刷新。当我提交AJAX请求并使用replaceWith（）时，我试图替换的元素将被添加到页面中，但不会替换原始元素

简化代码：

page.html

<table>
   {% for form in formset %}
    <tr>
        <td>{{form.evidence}}</td>
        {% include 'detail.html' %}
   </tr>
    {% endfor %}
</table>

save.js

$(function () {
    $(".save-classification").click(function () {
        var id = $(this).attr('id').replace('-save-button','');

        var url = $(this).attr('action');
        var var_n = $(this)

        var evidence = $(this).closest("tr").find("td." + id + '-evidence-cell').find("li.evidence-cohort-li").find("input.textinput").val();

        // some validation...

        data = {
            id: id,
            evidence: evidence,
            save: true,
        }

        $.ajax({
          url: url,
          type: 'post',
          data: data,
          dataType: 'json',
          success: function (data){
              if (data.form_is_valid) {
                console.log('Save variant form is valid')
                console.log(data['variant_classification_id'])

                var cell = $('#'.concat(data['variant_classification_id']
                  ).concat('-detail'))

                cell.replaceWith(data.html_detail);

              } else {
                alert('Form is not valid. '.concat(data['form_errors']).concat(
                  ' Please save any other classified variants and then refresh the page to continue.'))
                // if(confirm('Form is not valid. '.concat(data['form_errors']))){
                //       window.location.reload();
                //   }
              }
          },
          error: function () {
              console.log('Error: Not saved with AJAX')
          },

        });
        return false;

    });
});

因此，我尝试将detail.html中标记的内容替换为html_detail的新内容，该内容应更新obj.updated=True，因此仅在detail.html中显示更新内容，如下所示：

    {% if obj.updated  %}
        <td id='{{obj.id}}-detail' colspan=2>Updated</td>
    {% else %}
        <td id='{{obj.id}}-detail'>not updated</td>
        {% include 'save_container.html' %}          
    {% endif %}

{%if obj.updated%}
更新
{%else%}
未更新
{%include'保存容器.html%}
{%endif%}

但是，页面更新为具有上述两个标签，即：

        <td id='{{obj.id}}-detail' colspan=2>Updated</td>
        <td id='{{obj.id}}-detail'>not updated</td>
        {% include 'save_container.html' %}         

更新
未更新
{%include'保存容器.html%}

---

AJAX调用和表单验证完成后，如何使用obj.updated=True完全替换detail.html中未更新的标记？

您可以这样尝试->

var\n.nestest（'tr'）.find（cell.html（data.html\u detail）

我可以把这个放在哪里？而不是

cell.replacetwith（data.html\u detail）放在上面，请参见。
$(function () {
    $(".save-classification").click(function () {
        var id = $(this).attr('id').replace('-save-button','');

        var url = $(this).attr('action');
        var var_n = $(this)

        var evidence = $(this).closest("tr").find("td." + id + '-evidence-cell').find("li.evidence-cohort-li").find("input.textinput").val();

        // some validation...

        data = {
            id: id,
            evidence: evidence,
            save: true,
        }

        $.ajax({
          url: url,
          type: 'post',
          data: data,
          dataType: 'json',
          success: function (data){
              if (data.form_is_valid) {
                console.log('Save variant form is valid')
                console.log(data['variant_classification_id'])

                var cell = $('#'.concat(data['variant_classification_id']
                  ).concat('-detail'))

                cell.replaceWith(data.html_detail);

              } else {
                alert('Form is not valid. '.concat(data['form_errors']).concat(
                  ' Please save any other classified variants and then refresh the page to continue.'))
                // if(confirm('Form is not valid. '.concat(data['form_errors']))){
                //       window.location.reload();
                //   }
              }
          },
          error: function () {
              console.log('Error: Not saved with AJAX')
          },

        });
        return false;

    });
});

    {% if obj.updated  %}
        <td id='{{obj.id}}-detail' colspan=2>Updated</td>
    {% else %}
        <td id='{{obj.id}}-detail'>not updated</td>
        {% include 'save_container.html' %}          
    {% endif %}

        <td id='{{obj.id}}-detail' colspan=2>Updated</td>
        <td id='{{obj.id}}-detail'>not updated</td>
        {% include 'save_container.html' %}