[Answered ]-GET request gets triggered after DELETE

by

0👍

✅

I resolved the issue by adding "javascript:void(0);" in the href tags of the remove buttons instead of "#" or leaving them empty.

<a href="javascript:void(0);" class="trash-icon w-inline-block" onclick ="removeduty({{duty.id}})">
👤Elina

1👍

Rather than the duty.id being supplied as a parameter directly to an inline function it would be cleaner to use an externally registered event handler that inspects the (click) event to identify the element and from that deduce the duty.id assigned to either event.target or suitable parent.

The inline SVG images could be replaced with use elements if you were to store the all paths for all SVG images elsewhere (see below) – this would make the HTML smaller as the full path is only written once rather than perhaps dozens of times.

The event handler is listening for clicks on the SVG elements so the hyperlink effectively does nothing now except provide the data-dutyid value that is consumed within the event handler. In the snippet the duty.id values were replaced with hardcoded numeric values only as a "for-instance" – these would be {{duty.id}} in the real code.

const getCookie=(name)=>`Some code to find a cookie named:"${name}"`;
const getresponse=(r)=>r.json();
const callback=(r)=>console.log(r.message);
const errorhandler=(e)=>console.warn('Error deleting duty: %o',e);


document.addEventListener('click',e=>{
  if( e.target instanceof SVGUseElement || e.target instanceof SVGSVGElement ){
    
    e.preventDefault();
    
    let dutyid=e.target.closest('a').dataset.dutyid;
    let config={ 
      method:'delete',
      headers:{ 'X-CSRFToken':getCookie('csrftoken') }
    };
    
    e.target.closest('div.cms-added-item').remove();
    
    fetch( `removeduty/${dutyid}`, config )
      .then( getresponse )
      .then( callback )
      .catch( errorhandler )
  }
});
<div id="dutysection" class="dutyitems">
  <!-- example hardcoded items - loop removed -->
  <div class="cms-added-item">
    <p class=" cms-added-list-item">BANANA</p>
    <div class="action-wrap-app">
      <a href="#" class="trash-icon w-inline-block" data-dutyid="303">
        <div class="delete w-embed">
          <svg viewBox="0 0 36 39"  height="32" fill="none" preserveAspectRatio="xMinYMin">
            <use href="#trashcan" />            
          </svg>
        </div>
      </a>
    </div>
  </div>

  <div class="cms-added-item">
    <p class=" cms-added-list-item">WOMBLE</p>
    <div class="action-wrap-app">
      <a href="#" class="trash-icon w-inline-block" data-dutyid="304">
        <div class="delete w-embed">
          <svg viewBox="0 0 36 39"  height="32" fill="none" preserveAspectRatio="xMinYMin">
            <use href="#trashcan" />            
          </svg>
        </div>
      </a>
    </div>
  </div>
  
  <div class="cms-added-item">
    <p class=" cms-added-list-item">{{duty.text}}</p>
    <div class="action-wrap-app">
      <a href="#" class="trash-icon w-inline-block" data-dutyid="{{duty.id}}">
        <div class="delete w-embed">
          <svg viewBox="0 0 36 39"  height="32" fill="none" preserveAspectRatio="xMinYMin">
            <use href="#trashcan" />            
          </svg>
        </div>
      </a>
    </div>
  </div>
  
</div>














<!--
  If you use lots of SVG images on the page, rather than add the full path inline with the HTML 
  every time you add the image it would be better to maintain the `path` elements within a `defs`
  element as below and call it using `use`
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" aria-hidden="true" style="position:absolute; width:0; height:0; overflow:hidden; display:none">
    <defs>
        <symbol id="trashcan">
            <path d="M12.0841 29.526L18.0363 23.4738L24.0504 29.526L26.8744 26.6641L20.9102 20.5999L26.8744 14.5358L24.0504 11.6619L18.0363 17.726L12.0841 11.6619L9.22219 14.5358L15.2124 20.5999L9.22219 26.6641L12.0841 29.526ZM6.87654 38.8597C5.85041 38.8597 4.94768 38.4732 4.16834 37.7002C3.38904 36.9272 2.99939 36.0253 2.99939 34.9945V6.51948H0.746094V2.65428H11.157V0.798828H24.8657V2.65428H35.2765V6.51948H33.0233V34.9945C33.0233 36.0253 32.6356 36.9272 31.8603 37.7002C31.085 38.4732 30.1802 38.8597 29.1461 38.8597H6.87654Z" fill="currentColor"></path>
        </symbol>
    </defs>
</svg>
👤Professor Abronsius

Leave a comment